Nov 20, 2022

Solution 1 :

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%">
<tr>
<th>Product</th>
<th>Model</th>
<th>Price</th>
</tr>
<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>``````

Solution 2 :

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>
<tr>
<th>Name</th>
<th>count</th>
</tr>
<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>``````

Solution 3 :

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;
self.calculateColumn(index);
console.log(`Total for column \${\$(this).text()}: \${self.find('tfoot tr td').eq(index).text()}`);
});
};
})(jQuery);

\$('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 {
}
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>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
<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>``````

Problem :

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() {
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>

``````

Comment posted by Nathan Duncalf

Hi sorry, that’s the bit i don’t know how to do, new to this

Comment posted by epascarello

So use the index of the column….

Comment posted by epascarello

`\$('table tr').each`