Create table rows (subheaders?) that scroll with page - javascript

I have a long table that I need to have the subheaders scroll with their part of the table. I know there are plenty of functions out there that will scroll the <thead>, but I'm a little lost when it comes to getting other rows to scroll as well. Basically, this is the structure of the table.
<table>
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Date</th>
<th>Date</th>
</tr>
<tr>
<th></th>
<th>Sales</th>
<th>Qty</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location #1</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
//....undefined number of rows
<tr>
<td>Location #2</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
//...and so on, there can be an undefined number of groupings like this
</tbody>
</table>
So I need the two rows in the thread to scroll down the page with the entire table, as well as the rows with 'Location' to scroll down with the page until it comes to a new 'Location', then it needs to switch to scroll that row.
EDIT: I don't think that this is a duplicate of the linked question. All of those only address the header scrolling with the page, I need the 'subheader' (rows of the table) to scroll until it comes to the next subheader and so on for an undefined number of times.


Ok, so i've written some code that does exactly what you want, but is far from a finished product. The code explaination is at the end. Here it goes:
What I've done is fairly simple.
Measure the total distance scrolled.
Check if scrolled distance keeps thead or tr in viewport.
If yes, then apply css to move it
Else, apply css that acts as extrems - either the viewport is above or below the elements.
Hope it helps.
PS: I know I should've made a fiddle for it and I did try, but i couldn't get it to work. If someone can make a fiddle for this code, I'd appreciate that very much.
var table = $("#data_table");
var head = $("#data_table thead");
var head_top=head.offset().top;
var rows = $("#data_table tbody tr");
var row_tops = [];
for(var i =0; i< rows.length/6; i++){
row_tops[i]=rows[6*i].offsetTop + head_top - 60;
rows[i*6].style.background="#555";
rows[i*6].style.color="#fff";
}
var scrolled = null;
var offset = null;
var scroller=function(){
scrolled = $(window).scrollTop();
if (scrolled - head_top < 0){
offset=0;
} else if(scrolled - head_top > table.height()){
offset=table.height();
} else{
offset=scrolled - head_top;
};
head.css("transform","translateY("+offset+"px)");
for(var i=0; i<row_tops.length; i++){
if (scrolled - row_tops[i] < 0){
offset=0;
} else if(scrolled - row_tops[i] > rows[6*i].offsetHeight*6){
offset=rows[6*i].offsetHeight*6;
} else{
offset=scrolled - row_tops[i];
};
rows[6*i].style.transform="translateY("+(offset)+"px)";
}
};
$(window).scroll(scroller);
table{
border: 2px solid #ccc;
position: relative;
padding-top: 60px;
padding-bottom: 0px;
}
thead{
position: absolute;
top: 0;
width: 100%;
height: 60px;
background: #234;
color: white;
transition: transform 100ms ease-out;
z-index: 1;
}
thead th{
border-bottom: 1px solid #fff;
width: 100%;
}
tbody tr{
background: white;
transition: transform 100ms ease-out;
}
<br><br><br><br><br><br>
<h2>There's a lot of br elements, just to check scrolling effects<br>The main table can be seen after scrolling a bit</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table id="data_table">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Date</th>
<th>Date</th>
</tr>
<tr>
<th></th>
<th>Sales</th>
<th>Qty</th>
<th>%</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location #1</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #2</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #3</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #4</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td>Location #5</td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
<tr>
<td></td>
<td>$0.00</td>
<td>0.00</td>
<td>0.00%</td>
</tr>
</tbody>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Related

Calculate sum of multiple nested rows jQuery

My table has nested rows in which the first rows should have the sum of the values of their children.
How can I insert the sum of months into their respective quarters, and also insert the sum of the quarters into their respective years?
Here's a jsfiddle with the expected result and what I have tried.
Here's another jsfiddle with an attempt to solve this using classes.
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
$('table tr').each(function() {
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
totalColumn += parseInt(num);
}
});
$('table tfoot td').eq(index).html(totalColumn.toString());
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Expected Result</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td>2022</td>
<td></td>
<td>12</td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td>9</td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td></td>
</tr>
<tr class="font-bold">
<td>2021</td>
<td></td>
<td>15</td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td>8</td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td>7</td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

Here is a working version
I rely on Total Q in the first column, but a class might be safer like I did with year
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
let totalCell;
let yearCell;
$('table tr').each(function(i) {
if($(this).find("td").eq(0).hasClass('year')) yearCell = $(this).find("td").eq(index);
if($(this).find("td").eq(0).text().includes("Total Q")) totalCell = $(this).find("td").eq(index);
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
num = +num;
yearCell.text(+yearCell.text() + num)
totalCell.text(+totalCell.text() + num)
totalColumn += num;
}
});
$('table tfoot td').eq(index).html(totalColumn);
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td class="year">2022</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td>4</td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td>11</td>
</tr>
<tr class="font-bold">
<td class="year">2021</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

display data in table from given string of array in javascript

I have to display data in html table in value column from given textarea field. The string value should be converted into an array and all data will execute through loop and display by sequence of order.
input string : vivek purohit abc xyz (and string data should be display sequence vise in value column)
here is my html code & javascript code:
function getValue() {
var data = document.getElementById("value").value;
var res = data.split(" ");
console.log(res);
document.getElementById("demo").innerHTML = res;
var store= [];
var dta = '<table><tr><td>Value</td><tr></table>'
for( i=1;i<=53;i++){
store += dta;
}
document.getElementById("dta").innerHTML = store;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flight Data</title>
<style type="text/css">
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
</style>
</head>
<body>
<textarea id="value" name="value" rows="" cols=""></textarea>
<button type="submit" onclick="getValue()">Submit</button>
<!-- <p id="demo"></p> -->
<h2 id="demo"></h2>
<h2 id="s1"></h2>
<div id="dta"></div>
<table>
<tr>
<th> Sr No.</th>
<th>ASDI</th>
<th>Aerobook</th>
<th id='value'>Value</th>
</tr>
<tr>
<td>1</td>
<td>Message Type</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Aircraft identifier</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Aircraft data</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Coordination fix</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Coordination time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Entry Point Name</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Entry Point Time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>Exit Point Name</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td>Exit Point Time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>Route</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>Departure point</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td>Final destination</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>13</td>
<td>Actual Arrival time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td>Registration</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td>Allocated SSR code</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>16</td>
<td>SSR Equipment</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>17</td>
<td>Aircraft Com/Nav/App aid Equipment.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td>Remarks field</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>19</td>
<td>Code field</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>Operator field</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>21</td>
<td>Scheduled departure time.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>22</td>
<td>Actual departure time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>23</td>
<td>Estimated time of arrival as filed</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>24</td>
<td>ADES 1 (Destination airport at activation)</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>25</td>
<td>Number of missed approaches at ADES 1</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>26</td>
<td>Time diverted from ADES 1</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>27</td>
<td>ADES 2 (First diversion airport)</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>28</td>
<td>Number of missed approaches at ADES 2</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>29</td>
<td>Time diverted from ADES 2</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>30</td>
<td>ADES 3 (Second diversion airport).</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>31</td>
<td>Number of missed approaches at ADES 3</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>32</td>
<td>Time diverted from ADES 3.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>33</td>
<td>Number of instrument approaches.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>34</td>
<td>Number of local movements.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>35</td>
<td>Persons on board</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>36</td>
<td>Returned field.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>37</td>
<td>Touched-down field.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>38</td>
<td>ICAO flight type and AFL billing ancillary flight type.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>39</td>
<td>Filed Flight Rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>40</td>
<td>Final Flight Rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>41</td>
<td>Distance to run at change to final flight rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>42</td>
<td>Time of change to final flight rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>43</td>
<td>SPA name at change to final flight rules.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>44</td>
<td>Route type indicator</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>45</td>
<td>Route miles flown</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>46</td>
<td>Departure airport runway.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>47</td>
<td>Final destination airport runway</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>48</td>
<td>Termination agent.</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>49</td>
<td>Termination time</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>50</td>
<td>Deletion agent</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>51</td>
<td>Landing Gate</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>52</td>
<td>Departure Gate</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>53</td>
<td>Activation message time stamp</td>
<td>-</td>
<td></td>
</tr>
</table>
</body>
<script src="script.js"></script>
</html>

Populate rows on a table based on a value from table footer

I have the following table:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<table id="ccTransactions" class="table table-bordered">
<tbody>
<tr>
<td>Timestamp</td>
<td>Transaction</td>
<td>In</td>
<td>Out</td>
<td>Balance</td>
</tr>
<tr>
<td>06/02/2018</td>
<td>Card Sale</td>
<td>+£16.98</td>
<td></td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>Card Sale</td>
<td>+£14.10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total: </td>
<td>Total: </td>
<td>Final: £1334.05</td>
</tr>
</tfoot>
</table>
The table is being create when I supply a start and end date. It can only get the final balance for the end date selected. My question is, is there a way to populate the balance rows based on the final balance value that I have? Also, how can I add up the total amount from the in and out columns and display them in the table footer?
Update:
I've used this code to add up the out values. It worked on a different table where there where no empty rows, but doesn't work on this one.
var currencySymbol = '-£'
var total = 0.0;
$('table tbody tr:gt(0) td:nth-child(4)').each(function() {
total += parseFloat($(this).html().replace(currencySymbol, ''));
});
var $newTR = $("<tr><td colSpan='3'></td><td>Total: £"+total.toFixed(2)+"</td><td></td></tr>");

const priceToNumber = number => +number.replace(/(^[-+£]*)([0-9]*[?.][0-9]{0,2})/g, '$2')
const getHeaderIndex = column => {
let i
$('#headers td').each((index, h) => {
if($(h).data('column') === column) {
i = index
}
})
return i
}
const filterDatumByIndex = (data, index) => {
let arr = []
data.each(dataArray => {
[...data[dataArray]].forEach((child, i) => {
if(i === index) {
arr.push(child)
}
})
})
return arr
}
let dataSets = $('#data > tr').map((i, { children }) => children)
const getInBalance = () => {
let ins = filterDatumByIndex(dataSets, getHeaderIndex('IN'))
return ins.reduce((prev, {innerHTML}) => prev + priceToNumber(innerHTML), 0)
}
const getOutBalance = () => {
let ins = filterDatumByIndex(dataSets, getHeaderIndex('OUT'))
return ins.reduce((prev, {innerHTML}) => prev + priceToNumber(innerHTML), 0)
}
const getCurrentBalance = () => (getInBalance() - getOutBalance())
console.log(getInBalance())
console.log(getOutBalance())
console.log(getCurrentBalance()) //populate total with this method
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ccTransactions" class="table table-bordered">
<tr id="headers">
<td>Timestamp</td>
<td>Transaction</td>
<td data-column="IN">In</td>
<td data-column="OUT">Out</td>
<td>Balance</td>
</tr>
<tbody id="data">
<tr>
<td>06/02/2018</td>
<td>Card Sale</td>
<td>+£16.98</td>
<td></td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>Card Sale</td>
<td>+£14.10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total: </td>
<td>Total: </td>
<td>Final: £1334.05</td>
</tr>
</tfoot>
</table>

Swap table via select box option

Looking to swap multiple tables with a Javascript function, each one I try breaks horribly. I'd like the first table to show on page load, and then the rest to load as a different option is selected.
Any help would be greatly appreciated!
Here's the basic code:
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box" >
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box" >
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
Here's the link to the basic setup:
http://jsfiddle.net/xrjaar6g/

Try jQuery show() and hide():
$(function() {
$('#tableSwapper').on('change', function() {
$('table[id^=table]').hide();
$('#' + $(this).val()).show();
});
});
thead {
background-color: black;
color: white;
}
table,
th,
tr,
td {
text-align: center;
}
table {
margin-top: 10px;
}
#table2 {
display: none; /* hide the second table on page load */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box">
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box">
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>

Not sure if I understood it correctly, but this will help.
$(document).ready(function() {
$('#tableSwapper').change(function() {
$('.table').hide();
$('#' + $(this).val()).show();
});
});
thead {
background-color: black;
color: white;
}
table,
th,
tr,
td {
text-align: center;
}
table {
margin-top: 10px;
}
#table2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="tableSwapper">
<option value="table1">Table 1</option>
<option value="table2">Table 2</option>
</select>
<table id="table1" class="table table-bordered box">
<thead>
<tr>
<th>Points</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>
</div>
<table id="table2" class="table table-bordered box">
<thead>
<tr>
<th>TEAM</th>
<th>ARS</th>
<th>ASV</th>
<th>BUR</th>
<th>CHE</th>
<th>CRY</th>
<th>EVE</th>
<th>HUL</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>02</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>03</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>04</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
<tr>
<td>05</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
</tr>
</tbody>
</table>

just add this jquery
$('#table2').hide();
$('select').change(function(){
$('table').hide();
$('#' + $(this).val()).show();
});

Selecting on option2 showing second table, Try this Demo
$('#tableSwapper').change(function() {
var optionValue = $(this).val();
if(optionValue == "table1") {
$('#table1').show();
}
else{
$('#table1').hide();
}
if(optionValue == "table2") {
$('#table2').show();
}
else{
$('#table2').hide();
}
})

You can use jQuery's .toggle() to toggle the visibility of the tables.
Something like this;
http://jsfiddle.net/apn1eLam/
$( document ).ready(function() {
$('#table2').toggle();
});
$('#tableSwapper').on('change', function() {
//alert( this.value );
$('#'+this.value).toggle();
});

Adding scroll bars to 2 tables

I am trying to display 2 individual scroll bars for 2 tables wrapped inside a div.
My code is as follows
<html>
<body>
<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;">
<table width="100px" border="1">
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr>
</table>
</div>
<div style="width:100px;float:left;">
<table width="100px" border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
</body>
</html>
What I tried: I tried to use overflow:scroll; but when I am doing so both the tables are getting wrapped in one scroll bar.
Above mentioned tables are dynamically generated.
demo: http://jsfiddle.net/HLyDq/

Add the following Styles to the two table-parent divs:
<div style="...;overflow-y:auto;max-height:100px;">
JsFiddle: http://jsfiddle.net/gQyYe/

You have to specify the height:100px and the overflow:auto styles to the DIV which is the immediate parent of each Table.
Here is the corrected code
<html>
<body>
**<div style="width:300px;background:#00CC33;height:100px;">
<div style="width:150px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr>
<tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr><tr>
<td>100</td>
</tr>
</table>
</div>
**<div style="width:100px;float:left;height:100px;overflow:auto;">**
<table width="100px" border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
</div>
</body>
</html>
The code enclosed between a pair of ** are the corrected lines. Check this JSFiddle - http://jsfiddle.net/yYxuN/1/
Hope this helps

there's an answer here that can be helpful - I hope.
I'd prefer overflow:auto;in any case

Categories