You probably do not want to loop through all the th element. Simply pass the index of the column you want to calculate:
$(document).ready(function() {
calculateColumn(2); // pass the index of the column to be calculated
});
function calculateColumn(index) {
var total = 0; // also not sure why you set 1 here
$('table tbody tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total:' + total);
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<thead>
<tr>
<th>Product</th>
<th>Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mobile</td>
<td>XYZ23</td>
<td>500</td>
</tr>
<tr>
<td>Laptop</td>
<td>MNH786</td>
<td>2000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Set the td column with nth-child and loop over that.
var sum = 0
$('tr td:nth-child(2)').each( function () {
sum += +this.innerText
})
$('table tfoot td:nth-child(2)').text(sum)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>count</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>1</td>
</tr>
<tr>
<td>bar</td>
<td>10</td>
</tr>
<tr>
<td>boo</td>
<td>21</td>
</tr>
<tr>
<td>far</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total:</td>
<td></td>
</tr>
</tfoot>
</table>
You can turn this into a jQuery plugin to make it easier to reuse.
Your total should start at 0.
(function($) {
$.fn.calculateColumn = function(index) {
let total = 0;
this.find('tbody tr').each(function() {
var value = parseInt($(this).find('td').eq(index).text());
if (!isNaN(value)) { total += value; }
});
this.find('tfoot tr td').eq(index).text(total);
};
$.fn.calculateAllColumns = function() {
let self = this;
this.find('thead th').each(function(index) {
self.calculateColumn(index);
console.log(`Total for column ${$(this).text()}: ${self.find('tfoot tr td').eq(index).text()}`);
});
};
})(jQuery);
$(document).ready(function() {
$('table').calculateAllColumns();
});
table, th, td {
text-align: center;
font-size: smaller;
}
table {
border-collapse: collapse;
}
table tbody tr:nth-child(even) {
background: #F7F7F7;
}
th, td {
padding: 0.5em;
}
thead {
background: #DDD;
}
tfoot {
border-top: thick double #DDD;
}
td:not(:last-child) {
border-right: thin solid #EEE;
}
/** Stack snippet console */
.as-console-wrapper .as-console .as-console-row .as-console-row-code,
.as-console-wrapper .as-console .as-console-row:after {
font-size: 0.667em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>5</td><td>10</td><td>15</td></tr>
<tr><td>10</td><td>20</td><td>30</td></tr>
</tbody>
<tfoot>
<tr>
<td>0</td><td>0</td><td>0</td>
</tr>
</tfoot>
</table>
I am using the below code to show the total value of all numbers from a column in my table called amounts. However, this is showing the totals for all columns and not just the amount column, any ideas how to fix this?
$(document).ready(function() {
$('table thead th').each(function(i) {
calculateColumn(i);
});
});
function calculateColumn(index) {
var total = 1;
$('table tr').each(function() {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text('Total:' + total);
}
</script>
So use the index of the column….
