We Keep Coding

How to expand table rows with jquery?

Currently I have the table that is presented as the image shows with the hidden even rows. What I am looking for is that all the rows are hidden and the name of the month appears.
In the example of the image it would only have to appear November and when displaying it would have that the information for that month will appear. I am using jexpand plugin from jquery
I leave the code so that you can see how I currently have it. Any ideas?
SCRIPT
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
CSS
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
HTML
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class= "text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<?php for($i = 0; $i < count($calls); ++$i) { ?>
<tr class="text-center">
<td id="id"><?= $calls[$i]['date'] ;?></td>
<td id="database"><?= $calls[$i]['calls'] ;?></td>
<td id="total"><?= $calls[$i]['sales'] ;?></td>
<td><div class="arrow"></div></td>
</tr>
<?php } ?>
<?php endif; ?>
</tbody>
</table>

As your dates are display in dd-mm-yyyy so easy way to get month is to use split method then once we get month we need to loop through trs to hide all month expect the first one and also add odd class to it.
Then, onclick of tr just get the month from td and then loop through trs with same month add up class to that td and show same tr.
Demo code:
//when tr is clicked
$(document).on("click", "#report tr.odd", function() {
//get month
var mnth = $(this).find("td:eq(0)").text().trim().split("-")[1]
//loop thorough tr to find same month tr
$("tbody > tr").not(this).each(function() {
var mnth_other = $(this).find("td:eq(0)").text().trim().split("-")[1]
if (mnth == mnth_other) {
$(this).toggle();
$(this).find(".arrow").toggleClass("up");
}
});
});
var date_current;
//loop through tr
$("tbody > tr").each(function() {
//get month
var dates = $(this).find("td:eq(0)").text().trim().split("-")[1];
//check if not equal
if (date_current != dates) {
$(this).addClass("odd");
$(this).find(".arrow").addClass("down");
date_current = dates;
} else {
//hide other tr
$(this).hide()
}
})
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class="text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
21-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
12
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
20-12-2020
</td>
<td id="database">
222
</td>
<td id="total">
21
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
</table>

prevent Vertical scroll but allow Horizontal scroll

I currently have a small agenda with a dayview
when my dynamic table starts to have a lot of <td>'s, a horizontal scrollbar apears but when the user scrolls to the right, he no longer has visual on what time he's actually selecting. I've created a small example shown in the snippet.
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position:relative;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>
I'd like the table that shows what time you're selecting (a vertical table) to scroll with the screen to the right, but maintain position when scrolling up or down.
preferable a css solution but if Javascript is the only option I'd be forced to use that.
Before this gets flagged as duplicate, I've seen the other question Here and tried the fiddles BUT they did not work in the way I wanted

In this case, you may need to use position: sticky with left: 0 on .firstTableCon:
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position: -webkit-sticky;
position: sticky;
left: 0;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>

You can add overflow-y:hidden; in container
#container{
width: 400px;
height:250px;
border:1px solid black;
overflow-x:auto;
white-space:nowrap;
position:relative;
overflow-y:hidden;
}
table{
border:1px solid black;
border-collapse:collapse;
}
table th{
padding: 8px;
border: 1px solid #ddd;
margin:0;
display:block;
}
table td{
padding: 8px;
border: 1px solid #ddd;
min-width: 150px;
min-height: 18px;
display:inline-block;
}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
.secondTable{
border-left: none !important;
}
.firstTableCon{
margin-left:100px;
margin-top:50px;
position:relative;
}
.tableContainer{
display:inline-block;
}
#absoluteContainer{
/* position:absolute; */
}
#timeTable{
/* position:fixed; */
}
<div id="container">
<div class="tableContainer firstTableCon">
<div id="absoluteContainer">
<table id="timeTable">
<tr>
<th>
8:00
</th>
</tr>
<tr>
<th>
9:00
</th>
</tr>
<tr>
<th>
10:00
</th>
</tr>
<tr>
<th>
11:00
</th>
</tr>
<tr>
<th>
12:00
</th>
</tr>
<tr>
<th>
13:00
</th>
</tr>
<tr>
<th>
14:00
</th>
</tr>
<tr>
<th style="border:0px;">
15:00
</th>
</tr>
</table>
</div>
</div>
<div class="tableContainer">
<table class="secondTable">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="border:0px;">
</td>
</tr>
</table>
</div>
</div>

Border collapse with rounded edges?

I am trying to render a React table that has no borders but has rounded edges. I tried using border-collapse: collapse, which removed the borders that were appearing between columns in the table, but it also removed the border-radius property I had set. Does anyone have an idea as to how to accomplish this?
Here is how I am styling the table. Note I do not specify borders anywhere, but they are still appearing.
moduleSection {
border-radius: 4px;
background-color: #fff;
}
And here is how I create the table in my JS file:
renderRow = (item) => {
return (
<tr key={item.id}>
<td>
{item.name}
</td>
<td>
<div>
{item.status}
</div>
</td>
</tr>
);
}
render() {
const items = this.props.items;
return (
<table className={styles.moduleSection}>
<thead>
<tr>
<th>
<div>
Your Items
</div>
</th>
<th>
<div>
Item Status
</div>
</th>
</tr>
</thead>
<tbody>{items.map(this.renderRow)}</tbody>
</table>
);
}

Try changing
border-radius = 4px; to border-radius:4px;
and add
border:none;

Here's an example using a wrapper div :
<div style="display: table;
padding: 2px;
border-radius: 5px;
border: 1px solid #999;">
<TABLE style="border-collapse: collapse;">
<THEAD>
<TR style="background-color: red;">
<TH>Weekday</TH>
<TH>Date</TH>
<TH>Manager</TH>
<TH>Qty</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Mon</TD>
<TD>09/11</TD>
<TD>Kelsey</TD>
<TD>639</TD>
</TR>
<TR>
<TD>Tue</TD>
<TD>09/12</TD>
<TD>Lindsey</TD>
<TD>596</TD>
</TR>
<TR>
<TD>Sun</TD>
<TD>09/17</TD>
<TD>Susan</TD>
<TD>272</TD>
</TR>
</TBODY>
</TABLE>
</div>
Note: display:table; is not supported in IE7 and earlier. IE8 requires a: !DOCTYPE in the document. All modern browsers (including IE9) support it though, so it shouldn't be a problem.

Here is a table with the css working. You must be having some conflicting css that overrides these styles. This is exactly as you posted in the question. And it seems to be working. See the fiddle.
Sample HTML:
<table class="moduleSection">
<tr>
<td>
testing
</td>
<td>
table
</td>
</tr>
<tr>
<td>
testing
</td>
<td>
table
</td>
</tr>
</table>
CSS:
.moduleSection {
border-radius: 10px;
background-color: #fff;
}
See this fiddle:
https://jsfiddle.net/8s8jnmw7/
And it even works with border collapse added:
https://jsfiddle.net/8s8jnmw7/1/
I have tested this in chrome, firefox and IE Edge.

Bootstrap table within Bootstrap grid - spacing is correct for the first 3 tables, but the table isn't occupying all space in the 4th grid element

I have been developing a GeoIP Attack Map, similar to the Norse Attack Map. I am trying to add a dashboard/legend to my app that will be updated and appended to as new data is processed by the data server. I am trying to use a bootstrap grid/table approach to styling, but I am having issues getting the final table to occupy all of the grid space it has been allocated. I am very new to bootstrap (I just started working with it yesterday) and my html/css styling in general could definitely use some work. All advice pertaining to any aspect of my approach is appreciated.
Link to project branch - https://github.com/MatthewClarkMay/geoip-attack-map.git
HTML:
<div class='container-fluid'>
<div class='row'>
<div class='col-md-1'>
<table class='table table-condensed' id='service-table'>
<thead>
<tr>
<th class='text-center'>Color</th>
<th class='text-center'>Service</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class='circle' id='ftp-color' style='background:#ff0000'></div></td>
<td>FTP</td>
</tr>
<tr>
<td><div class='circle' id='ssh-color' style='background:#ff8000'></div></td>
<td>SSH</td>
</tr>
<tr>
<td><div class='circle' id='telnet-color' style='background:#ffff00'></div></td>
<td>TELNET</td>
</tr>
<tr>
<td><div class='circle' id='email-color' style='background:#80ff00'></div></td>
<td>EMAIL</td>
</tr>
<tr>
<td><div class='circle' id='whois-color' style='background:#00ff00'></div></td>
<td>WHOIS</td>
</tr>
<tr>
<td><div class='circle' id='dns-color' style='background:#00ff80'></div></td>
<td>DNS</td>
</tr>
<tr>
<td><div class='circle' id='http-color' style='background:#00ffff'></div></td>
<td>HTTP</td>
</tr>
<tr>
<td><div class='circle' id='https-color' style='background:#0080ff'></div></td>
<td>HTTPS</td>
</tr>
<tr>
<td><div class='circle' id='sql-color' style='background:#0000ff'></div></td>
<td>SQL</td>
</tr>
<tr>
<td><div class='circle' id='snmp-color' style='background:#8000ff'></div></td>
<td>SNMP</td>
</tr>
<tr>
<td><div class='circle' id='smb-color' style='background:#bf00ff'></div></td>
<td>SMB</td>
</tr>
<tr>
<td><div class='circle' id='auth-color' style='background:#ff00ff'></div></td>
<td>AUTH</td>
</tr>
<tr>
<td><div class='circle' id='rdp-color' style='background:#ff0060'></div></td>
<td>RDP</td>
</tr>
<tr>
<td><div class='circle' id='dos-color' style='background:#ffccff'></div></td>
<td>DOS</td>
</tr>
<tr>
<td><div class='circle' id='icmp-color' style='background:#ffcccc'></div></td>
<td>ICMP</td>
</tr>
<tr>
<td><div class='circle' id='other-color' style='background:#ffffff'></div></td>
<td>OTHER</td>
</tr>
</tbody>
</table> <!--close service-table-->
</div> <!--close container service col-->
<div class='col-md-2'>
<table class='table table-condensed' id='continent-origin-table'>
<thead>
<tr>
<th class='text-center' style='width:20%;' >Count</th>
<th class='text-center' style='width:80%;'>Continent</th>
</tr>
</thead>
<tbody>
<!--APPEND CONTENT HERE-->
</tbody>
</table> <!--close continent-origin-table-->
</div> <!--close continent-origin col-->
<div class='col-md-2'>
<table class='table table-condensed' id='country-origin-table'>
<thead>
<tr>
<th class='text-center' style='width:20%;'>Count</th>
<th class='text-center' style='width:20%;'>Flag</th>
<th class='text-center' style='width:60%;'>Country</th>
</tr>
</thead>
<tbody>
<!--APPEND CONTENT HERE-->
</tbody>
</table> <!--close country-origin-table-->
</div> <!--close country-origin col-->
<div class='col-md-7'>
<table class='table table-condensed' id='live-attacks-table'>
<thead>
<tr>
<th class='text-center' style='width:20%;'>Timestamp</th>
<th class='text-center' style='width:20%;'>IP</th>
<th class='text-center' style='width:10%;'>Flag</th>
<th class='text-center' style='width:20%;'>Country</th>
<th class='text-center' style='width:20%;'>City</th>
<th class='text-center' style='width:10%;'>Service</th>
</tr>
</thead>
<tbody>
<!--APPEND TABLE ROWS HERE-->
</tbody>
</table> <!--close live-attacks-table-->
</div> <!--close live-attack col-->
</div>
</div> <!--close dashboard-->
CSS:
body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#map {
height:100%;
width:100%;
position:absolute;
top:0;
bottom:0;
}
.circle {
height:18px;
width:18px;
border-radius:50%;
margin:0px;
}
.container-fluid {
height:25%;
width:100%;
position:absolute;
bottom:3.5%;
background:black;
opacity:0.7;
}
table {
height:100%;
margin:0px;
}
tbody {
height:100%;
display:block;
overflow-y:scroll;
}
tr {
display:block;
}
th, td {
color:white;
}
.col-md-1 {
height:100%;
}
.col-md-2 {
height:100%;
}
.col-md-7 {
height:100%;
}
#service-table th, td {
width:100%;
}
.row {
height:100%;
}

according to the bootstrap docs, .col-xx-xx must be a child of .row which in turn is a child of .container or .container fluid.
Please take a look at the example at the bootstrap docs, properly setup your HTML and check if it's ok now.
Example:
<div class="container">
<div class="row">
<div class="col-md-7">
Content 1
</div>
<div class="col-md-5">
Content 2
</div>
</div>
</div>
EDIT:
I see your problem now. It's because you apply the display: block on tbody and tr (for overflowing).
I suggest taking a look at this site to create a tbody with overflow by CSS. Or this Stack Overflow question by CSS and javascript. Unfortunately you have to make use of fixed widths/heights.

How can I make an HTML TD that's set to overflow:hidden scroll smoothly with the click of a button through Javascript?

I have an HTML TD with overflow set to hidden. It's width is 850px and height is 567px. The content inside should measure 567px high and 1700px wide. I want the user to be able to click a JavaScript button that scrolls the next table that's inside the TD into view. How can I do this? I've tried document.getElementById("tilesDisplay").scrollBy(10,0) but that didn't work.
<tr>
<td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px">
<table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');"> <img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td>
<td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;">
<table>
<tr>
<td style="width:850px; height:567px;">
<table style="width:850px; height:567px;">
<tr>
<%
rowCount=0
for i=1 to (ubound(theseImagesSplit)-1)
if rowCount=3 or rowCount=6 then
rowCount=rowCount+1
response.Write("</tr><tr>")
else
if rowCount=9 then
rowCount=1
response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>")
else
rowCount=rowCount+1
end if
end if
RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn
tiID=RS("ID")
tiImageURL=RS("imageURL")
tiCaption=RS("caption")
tiFrontPic=RS("frontPic")
tiCollection=RS("collection")
RS.Close
if cInt(tiID)=cInt(firstImage) then
tiSummary="true"
tiBorder="#3c4534"
else
tiSummary="false"
tiBorder="#bdc49f"
end if
%>
<td style="height:150px;"><center>
<table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnailBorders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);">
<tr>
<td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td>
</tr>
</table>
</center></td>
<%
next
%>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" /> </td>
</tr>
</table>
</td>
</tr>

I think the easiest way would be to use a container div positioned relatively and offset the position of the container div on the button click event.
<table>
<tr> <td>
<div id="table-container"> <table class="subtable"> .... </table></div>
</td> </tr>
</table>
cont = document.getElementById('table-container');
offset = 850; // Or whatever the width of the subtable
<input onClick = "cont.style.left = cont.style.left - offset;">