javascript - 如何实现表格自动合计

问题描述

问 题

ID	字段1	字段2	字段3	字段4
1	11	12	13	14
2	22	26	28	27
合计

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

刚学前端 有大神知道下如何用JQ将每列自动合计到合计那里么
一个页面有好多个这样的表格要统计Q_Q

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

注意HTML结构，你写了thead却没有写body，修改如下：

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

其中，thead和tbody和tfoot都分开，thead为表头不遍历，tbody为遍历部分，tfoot为汇总部分，方便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]);
});

Update

这里有几个知识点：

1. new Array()构造新数组

2. .fill()填充数组

3. 选择器:not()和:first-child的用法

4. 字符串或者数字前面加+强转成数字

5. 赋值运算符+=的使用

这篇关于javascript - 如何实现表格自动合计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！