需要一个 jquery 脚本来在动态生成的表中添加列总数并附加行“总计”？

Question

我有一个用 PHP 生成的数据库驱动表，类似于：

<table width=100% align=center id="countit" padding=1>
    <tr>
        <td><b>S. No.</b></td>
        <td><b>Election</b></td>
        <td><b>Graduates</b></td>
        <td><b>Professionals</b></td>
        <td><b>Doctorate</b></td>
    </tr>
    <tr>
        <td>1</td>
        <td>Local</td>
        <td>52</td>
        <td>234</td>
        <td>12</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Municipal</td>
        <td>23</td>
        <td>765</td>
        <td>230</td>
    </tr>
    <tr>
        <td>3</td>
        <td>State</td>
        <td>55</td>
        <td>22</td>
        <td>12</td>
    </tr>

等等。我正在寻找一个 jQuery 脚本，它将计算所有不包含文本数据的列的总数，并创建一个名为 Totals 的行，该行将附加在表的最后一行之后。请问有什么建议吗？请记住，表格是动态生成的，所以我不知道总行数/列数。

Answer 1

首先，与您的问题没有直接关系，而是按如下方式更新您的 HTML；最好为表头使用<th> 标签：

<table width=100% align=center id="countit" padding=1>
    <tr>
        <th>S. No.</th>
        <th>Election</th>
        <th>Graduates</th>
        <th>Professionals</th>
        <th>Doctorate</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Local</td>
        <td>52</td>
        <td>234</td>
        <td>12</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Municipal</td>
        <td>23</td>
        <td>765</td>
        <td>230</td>
    </tr>
    <tr>
        <td>3</td>
        <td>State</td>
        <td>55</td>
        <td>22</td>
        <td>12</td>
    </tr>
</table>

其次，添加以下jQuery代码来实现你想要的：

$( document ).ready(function() {
  var colIndex = 0;
  var html = '';
  var noOfColumns = $("#countit").find('tr')[0].cells.length;

  for (i = 0; i < noOfColumns; i++) { 
    var total = 0;
    $("#countit tr").each(function(index) {
      
      var data = $(this).find('td').eq(colIndex).text();
      if (isInt(data)) {
        total=total+parseInt(data);
      }             
    });
    html+="<td>"+total+"</td>";      
    colIndex++;
  }
  $('#countit tr:last').after('<tr>'+html+'</tr>');

  function isInt(value) {
    return !isNaN(value) && 
         parseInt(Number(value)) == value && 
         !isNaN(parseInt(value, 10));
  }
});

最后，你需要一个 jQuery 库的引用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

See my example here...