The sum of the columns in the table (input) - html

Question

I need to make a table with dynamic column sums on a website. Unfortunately, I'm not very good at jQuery. Please help.
[enter image description here][1]
My table in HTML
[1]: https://i.stack.imgur.com/yV2Fo.png
table, td {
border: 1.25px solid black;
}
<table>
<thead>
<tr>
<td> NAME</td>
<td> Name 1 </td>
<td> Name 2 </td>
<td> Name 3 </td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td><input type="number"</td>
<td><input type="number"</td>
<td><input type="number"</td>
</tr>
<tr>
<td>B</td>
<td><input type="number"</td>
<td><input type="number"</td>
<td><input type="number"</td>
</tr>
<tr>
<td>C</td>
<td><input type="number"</td>
<td><input type="number"</td>
<td><input type="number"</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

Answer 1

I'm not sure how your table is set up. There are different ways you could do it, but I think this could be a solution:
I think something like this is what you are looking for?
Column
Total
A
150
B
100
C
50
Total
200
This is how you can accomplish this:
$(document).ready(() => {
let array = []; // Create an empty array
let sum = 0; // Set sum to 0 - This is only to set the data type to a number
/*
Use Jquery's :nth-child() selector to get target the 2nd cell in the table body
-- You can use :nth-child(3) for the 3rd cell etc...
Then use the $each method to perform a function.
The function will convert this cell's text (Using parseFloat() method) to a number and add (push()) it to our array
*/
$("table tbody td:nth-child(2)").each(function() {
array.push(parseFloat($(this).html()));
});
// Here we will loop over the array and add each value to the sum variable.
for (let i = 0; i < array.length; i++) {
sum += array[i];
}
// Then append the last child (last table cell) in the table's footer with this sum value || Or if you gave the this cell an id, you can use that instead.
$('table tfoot td:last-child').html(sum);
});
/* This can be used over many columns by selecting the different nth-child()'s
*/
table, td {
border: 1.25px solid black;
}
td {
padding: 3px;
text-align: center;
}
td:last-child {
font-weight: bolder;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<!-- Table Heading -->
<thead>
<tr>
<td> Column </td>
<td> Total </td>
</tr>
</thead>
<!-- Table Body -->
<tbody>
<tr>
<td>A</td>
<td>150</td>
</tr>
<tr>
<td>B</td>
<td>100</td>
</tr>
<tr>
<td>C</td>
<td>50</td>
</tr>
</tbody>
<!-- Table Footer -->
<tfoot>
<tr>
<td>Total </td>
<!-- Add an id to this cell for the total or use my method in the js code-->
<td id="tableTotal"></td>
</tr>
</tfoot>
</table>
Please read the comments in the snippet, this will explain the process.