javascript - How to implement automatic totaling of tables

Question

ID	Field 1	Field 2	Field 3	Field 4
1	11	12	13	14
2	twenty two	26	28	27
total

    <table id="mytable" border="1" width="37%">
  <thead>
    <tr>
    <td width="63" >ID</td>
    <td width="68" >字段1</td>
    <td width="62" >字段2</td>
    <td width="75" >字段3</td>
    <td>字段4</td>
  </tr>
  </thead>

  <tr>
    <td>1</td>
    <td width="63" >11</td>
    <td width="68" >12</td>
    <td width="62" >13</td>
    <td width="75" >14</td>
  </tr>
  <tr>
    <td>2</td>
    <td width="63" >22</td>
    <td width="68" >26</td>
    <td width="62" >28</td>
    <td width="75" >27</td>
  </tr>
  <tr id="totalRow">
    <td>合计</td>
    <td width="63" ></td>
    <td width="68" ></td>
    <td width="62" ></td>
    <td width="75" ></td>
  
  </tr>
</table>

I just learned the front-end. Does anyone know how to use JQ to automatically add up each column to the total?
There are many such tables on one page that need to be counted Q_Q

Answer 1

Pay attention to the HTML structure. You wrote thead but not body. Modify it as follows:

<table id="mytable" border="1" width="37%">
<thead>
    <tr>
        <td width="63">ID</td>
        <td width="68">字段1</td>
        <td width="62">字段2</td>
        <td width="75">字段3</td>
        <td>字段4</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td width="63">11</td>
        <td width="68">12</td>
        <td width="62">13</td>
        <td width="75">14</td>
    </tr>
    <tr>
        <td>2</td>
        <td width="63" >22</td>
        <td width="68" >26</td>
        <td width="62" >28</td>
        <td width="75" >27</td>
    </tr>
</tbody>
<tfoot>
    <tr id="totalRow">
        <td>合计</td>
        <td width="63"></td>
        <td width="68"></td>
        <td width="62"></td>
        <td width="75"></td>
    </tr>
</tfoot>
</table>

Among them, thead and tbody and tfoot are all separated. thead is the table header that is not traversed, tbody is the traversal part, and tfoot is the summary part, which is convenient for the jQuery selector.

var sum = new Array(+$('#mytable thead tr td:not(:first-child)').length).fill(0);

$('#mytable tbody tr').each(function() {
    $(this).children('td:not(:first-child)').each(function() {
        var index = $(this).index() - 1;

        sum[index] += +$(this).text();
    });
});

$('#mytable #totalRow td:not(:first-child)').each(function() {
    var index = $(this).index() - 1;

    $(this).text(sum[index]);
});

Update

Here are a few knowledge points:

1. new Array()Construct a new array

2. .fill()fill array

Usage of

3. selector:not() and :first-child

4. Add + in front of a string or number to force it into a number

5. Usage of assignment operator+=

Answer 2

Hope you can understand
html code

<table border="" cellspacing="" cellpadding="">
        <tr>
            <th>ID</th>
            <th>字段1</th>
            <th>字段2</th>
            <th>字段3</th>
            <th>字段四</th>
        </tr>
        <tr id="shuju_0">
            <td>数据1</td>
            <td>12</td>
            <td>21</td>
            <td>25</td>
            <td>2</td>
        </tr>
        <tr id="shuju_1">
            <td>数据2</td>
            <td>32</td>
            <td>16</td>
            <td>42</td>
            <td>21</td>
        </tr>
        <tr id="shuju_2">
            <td>合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

js code

var shuju0 =$("#shuju_0").children(),
        shuju1=$("#shuju_1").children(),
        shuju2=$("#shuju_2").children();
        for(var i=1;i<shuju0.length;i++){
            console.log($(shuju0[i]).text());
            $(shuju2[i]).text($(shuju0[i]).text()*1+$(shuju1[i]).text()*1);
        }

Answer 3

jquery each traverses each column, adds them up and puts them in the last row