javascript - Bagaimana untuk melaksanakan penjumlahan automatik jadual

Question

ID	Bidang 1	Bidang 2	Bidang 3	Bidang 4
1	11	12	13	14
2	22	26	28	27
Jumlah

    <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>

Saya baru belajar bahagian depan Adakah sesiapa tahu cara menggunakan JQ untuk menambah setiap lajur secara automatik kepada jumlah
Terdapat banyak jadual sedemikian pada satu halaman yang perlu dikira Q_Q

Answer 1

Perhatikan struktur HTML, anda menulis thead却没有写body, ubah suainya seperti berikut:

<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>

Antaranya, thead和tbody和tfoot都分开，thead为表头不遍历，tbody为遍历部分，tfoot ialah bahagian ringkasan untuk memudahkan penggunaan pemilih jQuery.

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]);
});

Kemas kini

Berikut adalah beberapa perkara pengetahuan:

1. new Array()Bina tatasusunan baharu

2. .fill()susun isi

3. Penggunaan pemilih:not()和:first-child

4. Tambah + di hadapan rentetan atau nombor untuk memaksanya ditukar kepada nombor

5. Penggunaan pengendali tugasan+=

Answer 2

Semoga anda dapat memahami
kod html

<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>

kod js

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 setiap lajur merentasi setiap lajur, menambahnya dan meletakkannya di baris terakhir