JSFiddle - React, Tailwind, and code Playground
HTML
<table border=1 id="category">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td id="sum1"></td>
<td id="sum2"></td>
</tr>
</table>
<h4>
My expected output
</h4>
<table border=1 id="same_id_wont_work_changed_for_demo_only">
<tr>
<th>User Name</th>
<th>User Belongs</th>
<th>Total Work Assigned</th>
<th>Not Called</th>
</tr>
<tr>
<td>vidyaranyapura</td>
<td>Category</td>
<td>172</td>
<td>156</td>
</tr>
<tr>
<td>sahasra</td>
<td>Company</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>global</td>
<td>Not Assigned</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td></td>
<td></td>
<td>672</td>
<td>506</td>
</tr>
</table>
JavaScript
var sum1 = 0;
var sum2 = 0;
$("#category tr").not(':first').not(':last').each(function() {
sum1 += getnum($(this).find("td:eq(2)").text());
sum2 += getnum($(this).find("td:eq(3)").text());
function getnum(t){
if(isNumeric(t)){
return parseInt(t,10);
}
return 0;
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
}
});
$("#sum1").text(sum1);
$("#sum2").text(sum2);