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>
Related
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>
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>
This question already has an answer here:
Javascript table tr deletes on tr (Dynamic tr delete and re-generate tr id)
(1 answer)
Closed 3 years ago.
I want to delete each third row in this code.
How I can do this?
Thanks for any answers
I was trying to do something like this:
const table = document.getElementById('myTable');
for (let i =0; i <table.rows.length; i++) {
if (i%3 === 0 ) {
table.deleteRow(i)
}
}
I have this table:
<tbody>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
I need a script which I will put in the console of my browser and I will delete each third row in anything table. Thank you!
The problem is that as soon as you remove a row from your table, the tables rows.length property decreases by 1 as well as the the order of your rows changes. (thus after removing, the next third will be a different element as before removing)
Better iterate over the elements from the last to the first like:
var myTable = document.getElementById("myTable");
for (var a = myTable.rows.length - 1; a > 0; a--) {
if ((a + 1) % 3 === 0) {
myTable.deleteRow(a)
}
}
<table id="myTable">
<tbody>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>
You can try the following way:
var table = document.querySelectorAll('tbody tr');
for (let i =0; i <table.length; i++) {
if(i%3==2)
table[i].remove();
}
<table>
<tbody>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>First row.</td>
</tr>
<tr>
<td>Second row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>
Use Array.forEach to iterate over a selection of all the rows.
const tableRows = document.querySelectorAll("#mytable tr")
Array.from(tableRows).forEach((row, i) => {
if ((i + 1) % 3 === 0) {
row.parentNode.removeChild(row);
}
})
<table id="mytable">
<tbody>
<tr>
<td>1 row.</td>
</tr>
<tr>
<td>2 row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>7 row.</td>
</tr>
<tr>
<td>8 row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>
Or use ECMAScript 2015's spread syntax to do the same thing
[...document.querySelectorAll('#mytable tr')].forEach((el, i) => {if (i % 3 === 2) {el.remove()}});
<table id="mytable">
<tbody>
<tr>
<td>1 row.</td>
</tr>
<tr>
<td>2 row.</td>
</tr>
<tr>
<td>DELETE 3</td>
</tr>
<tr>
<td>4 row.</td>
</tr>
<tr>
<td>5 row.</td>
</tr>
<tr>
<td>DELETE 6</td>
</tr>
<tr>
<td>7 row.</td>
</tr>
<tr>
<td>8 row.</td>
</tr>
<tr>
<td>DELETE 9</td>
</tr>
</tbody>
</table>
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';
}
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>