display data in table from given string of array in javascript - 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>

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>

How to fix header on scroll down of DataTable or regular table?

I have used data-table in my code, but i am trying to fix header.
i have also tried using fixHeader feature of data-table, but not worked proprly.
<div class="table-responsive">
<table class="temp1 table table-striped mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid"
aria-describedby="user-list-page-info" id="user-list-table">
<thead class='headertbl'>
<tr class="ligth" style="margin-left: 2px;">
<th> </th>
<th>Id_No</th>
<th>updated_date</th>
<th>estimated_date</th>
<th>product_id</th>
<th>product_name</th>
<th>box_no</th>
<th>color_code</th>
<th>color_name</th>
<th>size_code</th>
<th>size_name</th>
<th>childe_color</th>
<th>remark</th>
<th>arrival_date</th>
<th>units</th>
<th>quantity</th>
<th>unit_price</th>
<th>currency</th>
<th>excahnge</th>
<th>current_currency(JPY)</th>
<th>Amount</th>
<th>Insurance_cost</th>
<th>Shipping costs</th>
<th>custom rate</th>
<th>Tariffs</th>
<th>Purchase price</th>
<th> </th>
</tr>
</thead>
<tbody>
<!-- first row -->
<tr class="table-info" id="row2" >
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num1" value="1,00,000" onfocusout="change()"></td>
<td><input type="text" class="form-control form-control-sm" id="num2" value="3,00,000" onfocusout="change()"></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num3" value="10,000" onfocusout="change()"></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">update</button>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
<button type="button" class="btn btn-primary btn-sm">confirm</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100310</td>
<td></td>
<td>A1</td>
<td>IEB-010A</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td><span id="test1">50</span></td>
<td><span id="test2">120</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test4" onfocusout="change()" value="105"></td>
<td><span id="test3">6,30,000</span></td>
<td><span id="per">94%</span></td>
<td><span id="ans">93,750</span> </td>
<td><span id="ans11">2,81,250</span></td>
<td>3.80%</td>
<td><span id="ans33">9612</span> </td>
<td><span id="ans55">18,417</span></td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100310</td>
<td>15</td>
<td>IEB011</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td><span id="test5">10</span></td>
<td><span id="test6">40</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test7" onfocusout="change()" value="105"></td>
<td><span id="test8">42,000</span></td>
<td><span id="per2">6%</span></td>
<td><span id="ans2">6,250</span></td>
<td><span id="ans22">18,750</span></td>
<td>2.30%</td>
<td><span id="ans44">388</span></td>
<td><span id="ans66">6,114</span></td>
<td></td>
</tr>
<!-- second row -->
<tr class="table-info" id="row2" >
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num11" value="0" onfocusout="change2()"></td>
<td><input type="text" class="form-control form-control-sm" id="num22" value="0" onfocusout="change2()"></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num33" value="0" onfocusout="change2()"></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">update</button>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
<button type="button" class="btn btn-primary btn-sm">confirm</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100310</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB)</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td><span id="test01">50</span></td>
<td><span id="test02">120</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test04" onfocusout="change2()" value="105"></td>
<td><span id="test03">6,30,000</span></td>
<td><span id="per01">100%</span></td>
<td><span id="ans01">0</span> </td>
<td><span id="ans011">0</span></td>
<td>3.80%</td>
<td><span id="ans033">0</span> </td>
<td><span id="ans055">12,600</span></td>
<td></td>
</tr>
<!-- third row -->
<tr class="table-info" id="row2" >
<td><input type="checkbox" class="checkbox-input"></td>
<td>10003</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="no11" value="100000" onfocusout="onchange1()"></td>
<td><input type="text" class="form-control form-control-sm" id="no22" value="0" disabled></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="no33" value="0" style="visibility: hidden;"></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
<button type="button" class="btn btn-primary btn-sm">confirm</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100311</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB)</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td><span id="test11">50</span></td>
<td><span id="test22">120</span></td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" id="test44" onfocusout="onchange1()" value="1" disabled></td>
<td><span id="test33">6,000</span></td>
<td><span id="per11">94%</span></td>
<td><span id="ans112">93,750</span> </td>
<td><span id="ans111">0</span></td>
<td>0</td>
<td><span id="ans333">0</span> </td>
<td><span id="ans555">120</span></td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100311</td>
<td>15</td>
<td>IEB00011</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/15</td>
<td>1</td>
<td><span id="test55">10</span></td>
<td><span id="test66">40</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test77" onfocusout="onchange1()" value="1" disabled></td>
<td><span id="test88">400</span></td>
<td><span id="per22">6%</span></td>
<td><span id="ans221">6,250</span></td>
<td><span id="ans222">0</span></td>
<td>0</td>
<td><span id="ans444">0</span></td>
<td><span id="ans666">40</span></td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010ARTY</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
<tr class="table-info" id="row2" >
<td><input type="checkbox" class="checkbox-input"></td>
<td>10004</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
<td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010ATYU</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
<tr class="table-info" id="row2" >
<td><input type="checkbox" class="checkbox-input"></td>
<td>10004</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
<td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010AJKA</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
<tr class="table-info" id="row2" >
<td><input type="checkbox" class="checkbox-input"></td>
<td>10004</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
<td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-00010AKSLS</td>
<td>abc</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>brown</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
</tbody>
</table>
<style>
.table-responsive>.fixed-column
{
position: absolute;
display: inline-block;
width: auto;
padding: 0px 27px !important;
/* border: hidden; */
margin-left: -27px;
white-space: nowrap;
/* border-right: 1px solid #ddd; */
}
.table-responsive>.fixed-column th, td
{
padding: 15px 20px !important;
/* border-bottom: 1px solid white !important; */
text-align: center;
white-space: nowrap;
size: auto;
}
table.dataTable thead th
{
text-align: center;
white-space: nowrap;
}
table.dataTable th, td
{
width: 100%;
margin: 0px 8px;
/* clear: both; */
/* border-collapse: separate; */
/* border-spacing: 0; */
white-space: nowrap;
size: auto;
text-align: center;
table-layout: fixed;
}
</style>
above html code table i have used.
Also i have fixed first 4 columns as per need.
below js code used for fixed columns
// fixed column
var $table = $('.temp1');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:nth-child(-n+4)),td:not(:nth-child(-n+4))').remove();
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
$table.addClass('original_table');
Now in this code i have tried js of datatable.
$('.original_table').DataTable( {
fixedHeader: true
} );
also other solutions tried but not worked for header fix.
can you tell us how can i fix header wth dataTable feature or without dataTable features.
need table layout output like below screen image.

This works.
You have to adjust your values with the corresponding table header again.
$('.temp1').DataTable({
fixedHeader: true
});
.table-responsive>.fixed-column
{
position: absolute;
display: inline-block;
width: auto;
padding: 0px 27px !important;
/* border: hidden; */
margin-left: -27px;
white-space: nowrap;
/* border-right: 1px solid #ddd; */
}
.table-responsive>.fixed-column th, td
{
padding: 15px 20px !important;
/* border-bottom: 1px solid white !important; */
text-align: center;
white-space: nowrap;
size: auto;
}
table.dataTable thead th
{
text-align: center;
white-space: nowrap;
}
table.dataTable th, td
{
width: 100%;
margin: 0px 8px;
/* clear: both; */
/* border-collapse: separate; */
/* border-spacing: 0; */
white-space: nowrap;
size: auto;
text-align: center;
table-layout: fixed;
}
<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="temp1 table table-striped mt-2 table-bordered" cellspacing="0" cellpadding="0" style="margin-bottom: 0px; margin-top: 0px;" role="grid" aria-describedby="user-list-page-info" id="user-list-table">
<thead class='headertbl'>
<tr class="ligth" style="margin-left: 2px;">
<th> </th>
<th>Id_No</th>
<th>updated_date</th>
<th>estimated_date</th>
<th>product_id</th>
<th>product_name</th>
<th>box_no</th>
<th>color_code</th>
<th>color_name</th>
<th>size_code</th>
<th>size_name</th>
<th>childe_color</th>
<th>remark</th>
<th>arrival_date</th>
<th>units</th>
<th>quantity</th>
<th>unit_price</th>
<th>currency</th>
<th>excahnge</th>
<th>current_currency(JPY)</th>
<th>Amount</th>
<th>Insurance_cost</th>
<th>Shipping costs</th>
<th>custom rate</th>
<th>Tariffs</th>
<th>Purchase price</th>
<th> </th>
</tr>
</thead>
<tbody>
<!-- first row -->
<tr class="table-info" id="row2">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num1" value="1,00,000" onfocusout="change()"></td>
<td><input type="text" class="form-control form-control-sm" id="num2" value="3,00,000" onfocusout="change()"></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num3" value="10,000" onfocusout="change()"></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">update</button>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
<button type="button" class="btn btn-primary btn-sm">confirm</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100310</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td><span id="test1">50</span></td>
<td><span id="test2">120</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test4" onfocusout="change()" value="105"></td>
<td><span id="test3">6,30,000</span></td>
<td><span id="per">94%</span></td>
<td><span id="ans">93,750</span> </td>
<td><span id="ans11">2,81,250</span></td>
<td>3.80%</td>
<td><span id="ans33">9612</span> </td>
<td><span id="ans55">18,417</span></td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100310</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda(すのこ)</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td><span id="test5">10</span></td>
<td><span id="test6">40</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test7" onfocusout="change()" value="105"></td>
<td><span id="test8">42,000</span></td>
<td><span id="per2">6%</span></td>
<td><span id="ans2">6,250</span></td>
<td><span id="ans22">18,750</span></td>
<td>2.30%</td>
<td><span id="ans44">388</span></td>
<td><span id="ans66">6,114</span></td>
<td></td>
</tr>
<!-- second row -->
<tr class="table-info" id="row2">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10001</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num11" value="0" onfocusout="change2()"></td>
<td><input type="text" class="form-control form-control-sm" id="num22" value="0" onfocusout="change2()"></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="num33" value="0" onfocusout="change2()"></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">update</button>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
<button type="button" class="btn btn-primary btn-sm">confirm</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100310</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td><span id="test01">50</span></td>
<td><span id="test02">120</span></td>
<td>USD</td>
<td><input type="text" class="form-control form-control-sm" id="test04" onfocusout="change2()" value="105"></td>
<td><span id="test03">6,30,000</span></td>
<td><span id="per01">100%</span></td>
<td><span id="ans01">0</span> </td>
<td><span id="ans011">0</span></td>
<td>3.80%</td>
<td><span id="ans033">0</span> </td>
<td><span id="ans055">12,600</span></td>
<td></td>
</tr>
<!-- third row -->
<tr class="table-info" id="row2">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10003</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="no11" value="100000" onfocusout="onchange1()"></td>
<td><input type="text" class="form-control form-control-sm" id="no22" value="0" disabled></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" id="no33" value="0" style="visibility: hidden;"></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
<button type="button" class="btn btn-primary btn-sm">confirm</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100311</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td><span id="test11">50</span></td>
<td><span id="test22">120</span></td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" id="test44" onfocusout="onchange1()" value="1" disabled></td>
<td><span id="test33">6,000</span></td>
<td><span id="per11">94%</span></td>
<td><span id="ans112">93,750</span> </td>
<td><span id="ans111">0</span></td>
<td>0</td>
<td><span id="ans333">0</span> </td>
<td><span id="ans555">120</span></td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100311</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda(すのこ)</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/15</td>
<td>1</td>
<td><span id="test55">10</span></td>
<td><span id="test66">40</span></td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" id="test77" onfocusout="onchange1()" value="1" disabled></td>
<td><span id="test88">400</span></td>
<td><span id="per22">6%</span></td>
<td><span id="ans221">6,250</span></td>
<td><span id="ans222">0</span></td>
<td>0</td>
<td><span id="ans444">0</span></td>
<td><span id="ans666">40</span></td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda(すのこ)</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
<tr class="table-info" id="row2">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10004</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
<td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda(すのこ)</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
<tr class="table-info" id="row2">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10004</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
<td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda(すのこ)</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
<tr class="table-info" id="row2">
<td><input type="checkbox" class="checkbox-input"></td>
<td>10004</td>
<td>2021/04/10</td>
<td>2021/04/20</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="form-control form-control-sm" value="50,0000" disabled></td>
<td><input type="text" class="form-control form-control-sm" value="0" disabled></td>
<td></td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-primary btn-sm">cancel</button>
</td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td></td>
<td>A1</td>
<td>IEB-010A(HB) + IEB-011B(CBX)</td>
<td>Wanda</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>3</td>
<td>25</td>
<td>100</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>2,500</td>
<td>86%</td>
<td>43,103</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>100</td>
<td></td>
</tr>
<tr class="ligth" style="background-color: white;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>36100312</td>
<td>15</td>
<td>IEB011</td>
<td>Wanda(すのこ)</td>
<td>S</td>
<td>BR</td>
<td>ブラウン</td>
<td></td>
<td>2021/04/20</td>
<td>1</td>
<td>10</td>
<td>40</td>
<td>JPY</td>
<td><input type="text" class="form-control form-control-sm" value="1" disabled></td>
<td>400</td>
<td>14%</td>
<td>6,897</td>
<td>0</td>
<td>0.0%</td>
<td>0</td>
<td>40</td>
<td></td>
</tr>
</tbody>
</table>
</div>

Start from a simple DataTable which has both features working correctly: fixed columns and a fixed heading:
$(document).ready(function() {
var table = $('#example').DataTable( {
"fixedHeader": true,
"scrollX": true,
"fixedColumns": {
leftColumns: 1
},
"paging": false
} );
} );
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- fixed headings -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>
<!-- fixed columns -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.2/css/fixedColumns.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:150%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Then add your customizations one-by-one. If a customization breaks the table, then you can rethink that. Or ask a new specific question for that specific issue.
You can also visit the downloads page, to customize the resources you want to use.

How to hide the specific tr:nth-child(6) based on the content of a tr:nth-child(7) > td:nth-child(2)

I would like to hide with javascript a specific child :
#table-detail > tbody > tr:nth-child(10)
based on the content of another specific preceding child :
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)
I can hide the child as followed :
$('#table-detail > tbody > tr:nth-child(10)').css('display', 'none');
but I have no clue how to check the content of the preceding child (if child element
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)" content == 'Tarte-fine
then hide child element X.
Please find hereafter the table :
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <-CONTENT TO CHECK IN THIS CHILD ELEMENT
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <- CHILD ELEMENT TO HIDE
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>

You need to use :contains() selector that select element has special text content.
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('display', 'none');
Also you can simplify the code and use :eq() selector instead of :nth-child
$('#table-detail tr:eq(6) td:eq(1):contains("Tarte-fine")').css('display', 'none');
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>
Note that :contain() return unwanted result in some case, so you can use .filter() instead
$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
return $(this).text() == "Tarte-fine";
}).css('display', 'none');

You could check if that cell contains the specific text using :contains and hide that other cell using hide():
$(function() {
var found = $("#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains(Tarte-fine)").length > 0;
if (found) {
$("#table-detail > tbody > tr:nth-child(10)").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td>
<!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr>
<!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>

As an alternative this is the code to do what you need without using jquery.
This is by the way a more solid solution since you don't need to know the numerical order of both of the rows that contain the cell you want to check and the cell you want to hide.
const rows = document.getElementsByTagName('tr');
let textToCheck = 'Tarte-fine';
let childTextOfTheElementToHide = 'Taille (cm)';
let check = Object.keys(rows).filter(key => {
return rows[key].children[1].innerHTML === textToCheck
});
if(check.length > 0){
let hide = Object.keys(rows).filter(key => {
return rows[key].children[0].innerHTML === childTextOfTheElementToHide
});
rows[hide].style.display = 'none';
}

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>

Create table rows (subheaders?) that scroll with page

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>

Categories