javascripthtmlloopsfor-loophtml-table
Summing the numbers of the columns of the HTML table
I want to add the columns of the following tables together and display the same table in the last row. I was able to collect the columns of the first table and display them in the last row, but I want to repeat this code for all the tables, but I don't know how to do it.
I have used the following code to add the columns of the first table and it works fine, but I don't know how to repeat this code for all the tables.
function computeTableColumnTotal(colNumber) {
var result = 0;
try {
var tableBody = document.querySelector("tbody");
var howManyRows = tableBody.rows.length;
for (var i = 1; i < (howManyRows - 1); i++) {
var thisNumber = parseInt(tableBody.rows[i].cells[colNumber].childNodes.item(0).data);
if (!isNaN(thisNumber)) {
result += thisNumber;
}
}
} finally {
return result;
}
}
var final = 0;
var tbody = document.querySelector("tbody");
var howManyCols = tbody.rows[0].cells.length;
var totalRow = tbody.rows[tbody.rows.length - 1];
for (var j = 1; j < howManyCols; j++) {
final = computeTableColumnTotal(j);
totalRow.cells[j].innerText = final;
}html {
scroll-behavior:smooth;
}
body {
margin-bottom:200px;
}
* {
scroll-margin:30px;
}
h1 {
display:inline-block;
margin-top:0px;
font-size:22px;
border-bottom:3px solid black;
}
span{
margin-bottom:20px;
}
table {
border-collapse: collapse;
width: 90%;
direction:ltr;
margin:10px 10px;
overflow: scroll;
margin:0px;
}
th {
border:2px solid black;
padding:6px;
font-size:17px;
font-weight:bold;
text-align:center;
border-collapse: collapse;
}
td {
border:2px solid black;
padding:6px;
font-size:16px;
font-weight:bold;
text-align:center;
border-collapse: collapse;
}
caption {
padding:6px;
border:2px solid black;
border-bottom:none;
font-size:17px;
font-weight:bold;
text-align:right;
border-collapse: collapse;
background:dodgerblue;
color:white;
}
tr:nth-of-type(odd){
background:#B9B9B9;
}
button {
margin:20px 0px;
}
table{
margin-top: 20px;
}<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>A</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>A</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>A</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>Solution
document.querySelector return the first element matching your query.
Just use document.querySelectorAll to get all your table bodys.
Then loop over the returned tbodys for instance with a for(tbody in tbodys) loop.
Pass the current tbody to your compute function instead of making a query again.
And voilà:
function computeTableColumnTotal(tableBody, colNumber) {
var result = 0;
try {
var howManyRows = tableBody.rows.length;
for (var i = 1; i < (howManyRows - 1); i++) {
var thisNumber = parseInt(tableBody.rows[i].cells[colNumber].childNodes.item(0).data);
if (!isNaN(thisNumber)) {
result += thisNumber;
}
}
} finally {
return result;
}
}
var final = 0;
var tbodys = document.querySelectorAll("tbody");
for (tbody of tbodys) {
var howManyCols = tbody.rows[0].cells.length;
var totalRow = tbody.rows[tbody.rows.length - 1];
for (var j = 1; j < howManyCols; j++) {
final = computeTableColumnTotal(tbody, j);
totalRow.cells[j].innerText = final;
}
} html {
scroll-behavior:smooth;
}
body {
margin-bottom:200px;
}
* {
scroll-margin:30px;
}
h1 {
display:inline-block;
margin-top:0px;
font-size:22px;
border-bottom:3px solid black;
}
span{
margin-bottom:20px;
}
table {
border-collapse: collapse;
width: 90%;
direction:ltr;
margin:10px 10px;
overflow: scroll;
margin:0px;
}
th {
border:2px solid black;
padding:6px;
font-size:17px;
font-weight:bold;
text-align:center;
border-collapse: collapse;
}
td {
border:2px solid black;
padding:6px;
font-size:16px;
font-weight:bold;
text-align:center;
border-collapse: collapse;
}
caption {
padding:6px;
border:2px solid black;
border-bottom:none;
font-size:17px;
font-weight:bold;
text-align:right;
border-collapse: collapse;
background:dodgerblue;
color:white;
}
tr:nth-of-type(odd){
background:#B9B9B9;
}
button {
margin:20px 0px;
}
table{
margin-top: 20px;
}<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>A</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>A</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>A</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>C</td>
<td>20</td>
<td>20</td>
</tr>
<tr>
<td>D</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>- Ways to extend Array object in javascript
- Building bundle for web in vite
- Is there any way to hide the mapbox access token when initializing the map?
- Playwright - sharing state between tests
- How to create a thumbnail after cropping an image with jQuery Cropper
- Validate kendo upload control
- jQuery button click not showing/hiding content
- What's the difference between self and window?
- Small value in doughnut chart is not visible - Chartjs
- How can a function know whether it has been invoked as a constructor (using the `new` keyword)?
- What are the differences between a function expression (`function (…) { … }`) and invoking the Function constructor (`new Function(…)`)?
- Why is it possible for functions to have properties like objects? Are functions also objects?
- console.log timestamps in Chrome
- How can I count and show Unicode Characters when insert onclick to textarea?
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- Creating a new Date object or using setter methods of javascript Date()
- PHP request to PHP Websocket
- Type 'void' is not assignable to type '((event: ChangeEvent<HTMLInputElement>) => void) React TypeScript
- Is there some default popup for appstore download on itunes when webapp is viewed in mobile safari?
- Turn off webcam/camera after using getUserMedia
- Show a message if a text is copied successfully(alternative to alert)
- "Uncaught TypeError: Cannot read property 'property' of undefined" when loading style with mapbox
- How to get the first Tamil letter in a word?
- handle both mouse and touch events on touch screens
- Truncate number to two decimal places without rounding
- Tailwindcss in webpack configuration not getting applied
- How to access $children for creating Tabs component?
- How to load a gzip compressed javascript without a webserver?
- What's the yield keyword in JavaScript?
- How to get the value of a selected radio button