下拉框切换时如何更新Functional等数据的合计值？

我明白你遇到的困扰了：你想统计表格中当前显示项的functional和repair的合计值，但当下拉框切换筛选后，合计值仍计算所有数据的总和，而非仅显示的数据。

以下是你的相关代码：

HTML代码 #

<p><span>Functional: <span id="functional"></span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span>Repair: <span id="repair"></span></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <table id="emp-table">
        <thead>
            <th col-index = 1>ID</th>
            <th col-index = 2>BATCH
                <select class="table-filter" onchange="filter_rows(), asd()">
                    <option value="all">ALL</option>
                </select>
            </th>

            <th col-index = 3>DISTRICT
                <select class="table-filter" onchange="filter_rows(), asd()">
                    <option value="all">ALL</option>
                </select>
            </th>
            <th  col-index = 4>SCHOOL
                <select class="table-filter" onchange="filter_rows(), asd()">
                    <option value="all">ALL</option>
                </select>
            </th>
            <th  col-index = 5>FUNCTIONAL
             <!--    <select class="table-filter" onchange="filter_rows()">
                    <option value="all">ALL</option>
                </select> -->
            </th>
                   <th col-index = 6>REPAIR
                        </th>
                 <th >TOTAL</th>
            
        </thead>

                    <?php
                        if($query_run)
                        {

                               
                            foreach($query_run as $row)
                            {

                    ?>  
        <tbody>
            <tr class="inputItem">
                                 
                                <td > <?php echo $row['id']; ?> </td>    
                                 <td> <?php echo $row['pck_no']; ?> </td>
                                   <td> <?php echo $row['district']; ?> </td>   
                                     <td> <?php echo $row['school_name']; ?> </td>
                                     <td class="sample"> <?php echo $row['functional']; ?> </td>
                                     <td class="sample1"> <?php echo $row['repair']; ?> </td>  
                                       <td id=TotMarks></td>
</tr>   

        </tbody>
                  <?php       
                            }
                        }
                        else
                        {
                            echo "No Record Found";

                        }
                        ?>
    </table>


  <span id="val"></span>



</div>
</div>

原JavaScript脚本（筛选后合计未更新） #

<script>
    
    function asd(){
    var table = document.getElementById("emp-table"), sumVal = 0, sumrepair = 0;

    for(var i = 1; i < table.rows.length; i++)
    {
        sumVal = sumVal + parseInt(table.rows[i].cells[4].innerHTML);
         sumrepair = sumrepair + parseInt(table.rows[i].cells[5].innerHTML);


    }
// I want to the value of functional changes of sum if the dropdown is changes. 
         // This is the display of total of functional
         document.getElementById("functional").innerHTML = sumVal; 
         document.getElementById("repair").innerHTML = sumrepair; 
        
    }

</script>

问题原因分析 #

你的asd()函数现在是遍历表格的所有行，包括筛选后被隐藏的行（通常filter_rows()会给不符合条件的行添加display: none样式）。所以不管筛选与否，都会计算全部数据的总和。

解决方案 #

修改asd()函数，在遍历行的时候判断该行是否可见，只计算可见行的数值即可。这里可以通过检查行的offsetParent属性（如果元素被隐藏，offsetParent会是null），或者直接检查行的style.display属性。

修改后的JavaScript代码 #

<script>
    
    function asd(){
        var table = document.getElementById("emp-table"), sumVal = 0, sumrepair = 0;

        for(var i = 1; i < table.rows.length; i++){
            var row = table.rows[i];
            // 判断当前行是否可见（排除隐藏的行）
            if(row.offsetParent !== null){
                // 注意：要处理可能的空值或非数字情况，避免NaN
                var functionalVal = parseInt(row.cells[4].innerHTML) || 0;
                var repairVal = parseInt(row.cells[5].innerHTML) || 0;
                sumVal += functionalVal;
                sumrepair += repairVal;
            }
        }

        document.getElementById("functional").innerHTML = sumVal; 
        document.getElementById("repair").innerHTML = sumrepair; 
    }

</script>

额外优化建议 #

1. 调整HTML结构：你的代码会在每一行都生成一个<tbody>，这不符合HTML规范，应该用一个<tbody>包裹所有数据行：

<tbody>
<?php
if($query_run){
    foreach($query_run as $row){
?>  
    <tr class="inputItem">
        <td> <?php echo $row['id']; ?> </td>    
        <td> <?php echo $row['pck_no']; ?> </td>
        <td> <?php echo $row['district']; ?> </td>   
        <td> <?php echo $row['school_name']; ?> </td>
        <td class="sample"> <?php echo $row['functional']; ?> </td>
        <td class="sample1"> <?php echo $row['repair']; ?> </td>  
        <td class="tot-marks"></td> <!-- 不要用重复的id，改成class更合适 -->
    </tr>   
<?php       
    }
} else {
    echo "<tr><td colspan='7'>No Record Found</td></tr>";
}
?>
</tbody>

2. 如果filter_rows()是通过添加/移除类来隐藏行的，也可以通过检查行是否包含隐藏类来判断，比如：

if(!row.classList.contains('hidden')){
    // 计算逻辑
}

内容的提问来源于stack exchange，提问作者Bon Kennette Mangay Flores