如何对过滤后的 html 表求和？答案

【问题标题】：How to sum a filtered html table?如何对过滤后的 html 表求和？
【发布时间】：2020-07-13 14:20:37
【问题描述】：

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

我尝试添加一个条件，例如使求和取决于行的显示样式，但是没有成功。有没有简单的解决方案来实现这一点？就像一个简单的 javascript if 条件检查 td 元素所在的行是否隐藏？

编辑： 我的 HTML-Coods 看起来像这样（计算列总数的 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;                             
}

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

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

【问题讨论】：

如果你有隐藏字段，那么你就有隐藏字段，只有你知道你是如何实现隐藏的。你定了班吗？你调用了一个jQuery函数吗？无论您如何隐藏它们，您都是如何检查事物是否隐藏的权威，而不是我们。
您能否发布您的代码的工作示例（包括带有值 + 隐藏字段的示例 html 表）？

标签： javascript html html-table

【解决方案1】：

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

$(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;
    }
}

【讨论】：

您的解决方案效果很好！但是，我很少出现后续问题：当我使用下拉列表过滤我的表格时，直到我单击一个文本框来过滤另一列之前，列的总和不会刷新......我想这必须使用以下行： $('input').on('keyup click', function () 但是我必须添加什么，以使我的列总和在通过下拉列表过滤时刷新？
我添加了一个更改事件，但仍然不起作用，还尝试添加我发现的所有其他内容.. 仍然没有成功... 现在该行看起来像这样： $('input').on( 'input focus propertychange change keydown keyup click drop', function()
我解决了这个问题，我只需要将 $('input') 替换为 $('select')。抱歉这个愚蠢的问题。

【解决方案2】：

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

Array
.from(document.querySelectorAll('table#datatable td')) // Or some other selector you wish
.filter(r=>r.hidden) // Enter here your filter func. Can also filter by `r.style.display` etc.
.reduce((sum, curr)=>sum+(Number(curr.innerHTML) || 0), 0) // Here we try to get the value of the td. If it will resolve to NaN ==> We will return 0 and won't affect the value.

这将产生您想要的总和。然后将该值放在任何你想要的地方:)

资源：

【讨论】：