We Keep Coding

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>

Merging two html table in jquery

I want to merge two html table in jquery.I want to merge the table tbl1 and tbl2 and recreate a table joined.I just want to copy the tag not to cut the tag.need to have 3 tables
I have tried as
$('button').click(function(){
$('#tbl2 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl1 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl2 tbody tr').wrap('#joined tbody tr');
$('#tbl1 tbody tr').wrap('#joined tbody tr');
});
#joined{background:#ff0;margin-bottom:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>
<table id="joined"><thead><tr></tr><thead>
<tbody><tr></tr><tbody>
</table>
<table id="tbl1">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
<table id="tbl2">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
I need the html table as
<table id="joined">
<thead >
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
<th></th> <!-- empty cell -->
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
<td></td> <!-- empty cell -->
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</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';
}

Styling alternate rows using Javascript [duplicate]

This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 4 years ago.
I am trying to change background color of alternate rows of two tables using Javascript.
I am able to do it using below javascript but I'm sure there is a more efficient or short-cut way to select required child elements using CSS selectors. Can anyone help?
window.onload = function() {
var elem = document.getElementsByTagName('table')
for (let c = 0; c < elem.length; c++) {
var childElem = elem[c].getElementsByTagName('tr');
for (let d = 0; d < childElem.length; d = d + 2) {
childElem[d].classList.add('alt');
}
}
}
tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}
<html>
<body>
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h2>Backend tx</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</body>
</html>

You can achieve it with pure CSS and :nth-child:
tr:nth-child(2n) {
background-color: #eee;
}
tr:nth-child(2n + 1) {
background-color: #ccc;
}
<h2>Online Tx</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h2>Backend tx</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>

In CSS, simply use:
tr:nth-of-type(odd)
Working Example:
tr:nth-of-type(odd) {
background-color: rgb(191, 191, 191);
}
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>

Master-detail with HTML, CSS and jQuery

I want to create a master-detail. So, I follow this tutorial:
http://mrbool.com/how-to-create-a-master-detail-table-with-html-css-and-jquery/26848
I decided to reproduce it, but there is something wrong in my code(?).
Here's my code:
HTML/jQuery
<!DOCTYPE html>
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
$(".clk").click(function () {
var index = $(this).parent().parent().index();
var detail = $(this).parent().parent().next();
var status = $(detail).css("display");
if (status === "none")
$(detail).css("display", "table-row");
else
$(detail).css("display", "none");
});
});
</script>
</head>
<body>
<table id="tbSales" rules="rows">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="saleRow">
<td></td>
<td>01</td>
<td>01/01/2001</td>
<td>2</td>
<td>10,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>Product A 1</td>
<td>1</td> <td>7,00</td>
</tr>
<tr>
<td>A2</td>
<td>Product A 2</td>
<td>1</td>
<td>3,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="saleRow">
<td></td>
<td>02</td>
<td>02/02/2001</td>
<td>3</td>
<td>20,00</td>
</tr>
<tr class="itemsRow">
<td colspan="5"> Itens
<table class="tbItems" rules="rows">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>Product B 1</td>
<td>1</td>
<td>10,00</td>
</tr>
<tr>
<td>B2</td>
<td>Product B 2</td>
<td>2</td>
<td>5,00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tbody>
</table>
</body>
CSS:
#tbSales, .tbItems{
width:100%;
border:solid 1px;
}
#tbSales thead th, .tbItems thead th{
text-align:left;
}
#tbSales tr td, .tbItems tr td{
border:solid 1px;
}
#tbSales tr td:nth-child(1){
width:20px;
}
#tbSales tbody tr{
background:#DCDCDC;
}
.tbItems tr{
background:red;
}
#tbSales thead{
background:#4682B4;
}
.itemsRow{
display: none;
}
.tbItems{
font-size:12px;
}
This is what should happen:
This is what happen to me:
The row is empty! Why?

$("td:nth-child(1)")
Is overriding all first children from table.
You need to specify the line in which you want to replace the cell:
$(".saleRow td:nth-child(1)")

Your first line of javascript replaces the contents of all first children from your table.
Change :
$("td:nth-child(1)").html("<img src='images.jpg' class='clk'>");
with :
$("td:nth-child(1)").css("border","red dashed 2px")
and you'll see what I mean.
See it here : http://codepen.io/jeremythille/pen/qELyWX
td:nth-child(1) means "Every first <td> of each <tr> of the whole table". But you have nested tables...