Calculate sum of multiple nested rows jQuery - javascript

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>

Related

How do you use Javascript to change the background on a html Table

HTML Table that is happening now
I'm trying to take this HTLM table with numbers on it the first column added to the second equals the third. some of the sum column are not correct. the correct answer is in the fourth column. I need to use Javascript to change the background color of the rows that are not correct and add in the correct number? This is what I have so far? The attached picture is what is coming up to far.
This picture is what the HTML Table is supposed to look like
Please help
for (var m = 0; m < math.length; m++) {
// math[m][0] = the first element of the m-th array (indices start at 0)
// math[m][1] = the second element of the m-th array
// math[m][2] = the third element of the m-th array
document.write(math[m][0] + ' + ' + math[m][1] + ' = ' + math[m][2] + "<br>" +' Actual answer = '+ (math[m][0]+ math[m][1])+ "<br>");
}
</script>
<table class="mathTable" id="math" style="width:80%"; border="1em";>
<tr>
<th>1st Number</th>
<th>2nd Number</th>
<th>Answer</th>
<th>Actual Answer</th>
</tr>
<tr class='calculation'>
<td>5</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>7</td>
<td>6</td>
<td>13</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>5</td>
<td>10</td>
<td>10</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>3</td>
<td>13</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>4</td>
<td>7</td>
<td>11</td>
<td>11</td>
</tr>
<tr class='calculation'>
<td>3</td>
<td>9</td>
<td>12</td>
<td>12</td>
</tr>
<!-- needs background color change-->
<tr class='calculation'>
<td>8</td>
<td>5</td>
<td>12</td>
<td>13</td>
</tr>
<tr class='calculation'>
<td>2</td>
<td>6</td>
<td>8</td>
<td>8</td>
</tr>
<tr class='calculation'>
<td>5</td>
<td>9</td>
<td>14</td>
<td>14</td>
</tr>
<tr class='calculation'>
<td>6</td>
<td>6</td>
<td>12</td>
<td>12</td>
</tr>
</table>
</div>
Thank you

Tables are made up of rows and cells.
It's a good idea to use the thead and tbody tags in your table,
and recommended to separate the css from the body elements
to change the background color: add a class to the element with the chosen color
const tableMath = document.getElementById('table-math');
for (let line=1; line < tableMath.rows.length; line++)
{
if ( tableMath.rows[line].cells[2].textContent != tableMath.rows[line].cells[3].textContent )
{
tableMath.rows[line].cells[3].classList.add('badAnswer')
}
}
table {
border-collapse: collapse;
width: 80%;
margin: 1em;
}
td,th {
border: solid grey 1px;
padding: 5px;
}
th {
background-color: #7fffd5;
}
td {
text-align: center;
}
.badAnswer {
background-color: #f47c6f;
}
<table id="table-math">
<thead>
<tr>
<th> 1st Number </th>
<th> 2nd Number </th>
<th> Answer </th>
<th> Actual Answer </th>
</tr>
</thead>
<tbody>
<tr> <td>5</td> <td>3</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>7</td> <td>6</td> <td>13</td> <td>13</td> </tr>
<tr> <td>5</td> <td>5</td> <td>10</td> <td>10</td> </tr>
<tr> <td>8</td> <td>3</td> <td>13</td> <td>11</td> </tr>
<tr> <td>4</td> <td>7</td> <td>11</td> <td>11</td> </tr>
<tr> <td>3</td> <td>9</td> <td>12</td> <td>12</td> </tr>
<tr> <td>8</td> <td>5</td> <td>12</td> <td>13</td> </tr>
<tr> <td>2</td> <td>6</td> <td> 8</td> <td> 8</td> </tr>
<tr> <td>5</td> <td>9</td> <td>14</td> <td>14</td> </tr>
<tr> <td>6</td> <td>6</td> <td>12</td> <td>12</td> </tr>
</tbody>
</table>

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>

How to find value in row of table using jquery or javascript?

i want to find value in row of table. Sample , i have a this case
$("tr[id*='row']").each(function (i, el) {
//if($this.value() >10)
//console.log('This value in cell is: ' + this.value);
});
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>
In this case above , i want to compare and show the value in cell, which more than 10, but i confused in define the value in cell. Mabe you can give me adviced for this case .

Use find for td values.
$("tr[id*='row']").find('td').each(function(i, el) {
var val = $(this).text();
if (val > 10)
console.log('This value in cell is: ' + $(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

$(document).ready(function(){
$("tr[id*='row']").each(function () {
var td = $(this).find("td");
var countdeeptd = td.length;
td.each(function(i,el){
if(td.eq(i).text() > 10)
console.log('This value in cell is: ', td.eq(i).text());
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div1'>
<table border='2px'>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>7</td>
<td>8</td>
</tr>
</table>
<table border='2px'>
<tr id='row' style="background-color:yellow; color:red">
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border='2px'>
<tr>
<td>13</td>
<td>14</td>
</tr>
<tr id='row' style="background-color:yellow; color:red">
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

Re-apply css rules for first visible row on table

I am trying to change css style for the first visible row on a table using jQuery and css rules.
When i change the offset i would like to show first visible table TBODY row in red using my css rule.
this is my code example :
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
Thanks for your help.

Through Pure css it's not possible:- Targeting first visible element with pure CSS
But through jQuery you can do like below:-
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
$(".is-visible:first").css({"background-color":"red"});
$(".is-visible").not(":first").css({"background-color":"#ffffff"});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>

You have to do using jQuery. Try below code.
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
$(".is-visible").css({"background-color":"white"});
$("#row-"+offset).css({"background-color":"red"});
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You can see: https://jsfiddle.net/dkhny7t9/3/

Categories