Question

我有一个HTML表格，可以使用jquery进行过滤。在表格的底部，我想有一个“总计”行，该行将显示的所有值相加。 “总计”行中显示的总和应该是显示的所有行的总和，即不考虑隐藏的行。

我试图添加一个条件，例如使求和取决于行的显示样式，但是这种方法无法解决。有没有简单的解决方案来实现这一目标？就像一个简单的javascript if条件，该条件检查td元素所属的行是否被隐藏？

编辑： 我的HTML-Coods如下所示（计算列总数的javascript函数位于表格之后）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>

 <link rel="stylesheet" href="css2/bootstrap.css" />
 <link rel="stylesheet" href="css2/dataTables.bootstrap.min.css" />
 <link rel="stylesheet" href="css2/responsive.bootstrap.min.css" type="text/css" />
 <link rel="stylesheet" href="css2/buttons.bootstrap.min.css" type="text/css" />
 <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid" style="width:80%;">
<table id=datatable class="datatable table table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Address</th>
      <th>Class</th>
        <th>Class</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>
         <input type="text" class="form-control input-sm filter-column" placeholder="nach ID filtern"> 
        </th>
      <th>
        <input type="text" class="form-control input-sm filter-column"> 
      </th>
      <th>
        <input type="text" class="form-control input-sm filter-column" />
      </th>
      <th>
        <select class="form-control input-sm filter-column">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="B">C</option>
        </select>
      </th>
          <th>
        <select class="form-control input-sm filter-column">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="B">C</option>
        </select>
      </th>
    </tr>
  </tfoot>
  <tbody> 
 <tr>
<td>1</td> 
<td>bla</td> 
<td>500</td> 
<td>100%</td> 
<td>300</td> 
</tr> 
</tbody>
    <tfoot>
     <tr class="sum-row">
  <td id=data0></td> 
  <td id=data1></td> 
  <td id="data2">0</td> 
   <td id="data3">0</td>
    <td id="data4">0</td> 
</tr> 
  </tfoot>
</table>

</div> 
<script language="javascript" type="text/javascript">
var columnCount = document.getElementById('datatable').rows[2].cells.length;`
var tds = document.getElementById('datatable').getElementsByTagName('td');
var sum = 0;

var columnsToSum = [3,4];

for (i=0; i<columnsToSum.length;i++) {
            a = columnsToSum[i];            
            sum=0;
            var hasPercent = false;
        for(z = columnsToSum[i]; z < tds.length; z+=columnCount) {

sum += isNaN(tds[z].innerHTML) ? 0 : parseInt(tds[z].innerHTML); 

}
 document.getElementById("data"+ a).innerHTML = sum;                             
}
</script>
<script src="js2/jquery-1.11.3.min.js"></script>
<script src="js2/jquery.dataTables.min.js"></script>
<script src="js2/dataTables.bootstrap.min.js"></script>
<!-- Responsive extension -->
<script src="js2/responsive.bootstrap.min.js"></script>
<!-- Buttons extension -->
<script src="js2/dataTables.buttons.min.js"></script>
<script src="js2/buttons.bootstrap.min.js"></script>
<script src="js2/jszip.min.js"></script>
<script src="js2/buttons.html5.min.js"></script>

上面的代码始终显示表中所有值的总和，而不考虑过滤。

Answer 1

在这里，每当您在数据表中搜索输入内容时，您都可以使用jquery执行js代码。我已经成功运行了代码并做了一些修改。您可以尝试以下方法：

$(document).ready(function () {
    $('#datatable').DataTable();
    $('input').on('keyup click',calculate);
});

function calculate() {
    var columnCount = document.getElementById('datatable').rows[2].cells.length;
    var tds = document.getElementById('datatable').getElementsByTagName('td');

    var columnsToSum = [2, 4];
    var sum =0;
    for (i = 0; i < columnsToSum.length; i++) {
        a = columnsToSum[i];
        document.getElementById("data" + a).innerHTML = 0;
        sum = 0;
        var hasPercent = false;
        for (z = columnsToSum[i]; z < tds.length; z += columnCount) {

            sum += isNaN(tds[z].innerHTML) ? 0 : parseInt(tds[z].innerHTML);

        }
        document.getElementById("data" + a).innerHTML = sum;
    }
};
calculate();

应在放置所有jquery库之后放置此脚本。

Answer 2

您可以查询DOM并按attr进行过滤，如下所示：

eu-west-1.compute.internal

这将产生您想要的总和。然后将该值放在您想要的任意位置：）

资源：

Answer 3

我认为这段代码会起作用。

$(document).ready(function () {
    var table = $('#datatable').DataTable();
    calculatesum(table.rows().nodes());
    $('input').on('keyup click', function () {
        var searched = table.rows({
            search: 'applied'
        }).nodes();

        calculatesum(searched);

    });
});

function calculatesum(all) {
    var columnsToSum = [2, 4];
    for (i = 0; i < columnsToSum.length; i++) {
        a = columnsToSum[i];
        sum = 0;
        for (j = 0; j < all.length; j++) {

            var val = all[j].getElementsByTagName('td')[a].innerHTML;
            sum += isNaN(val) ? 0 : parseInt(val);


        }
        document.getElementById("data" + a).innerHTML = sum;
    }
}

如何总结一个过滤的HTML表格？

3 个答案: