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

需要一个jquery脚本来在动态生成的表中添加列的总数并追加行＆＃39; Totals＆＃39;？

1 个答案: