如何在下拉列表的每次更改時更新功能總計的值？

Question

這是我的主表，我想在其中獲取當前顯示的項目的“功能”、“修復”、“譴責”、“偷走”的總和。

我的問題是，即使我應用過濾器，它仍然返回所有的總和，即使它沒有顯示在我的表上。

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

這是我的腳本，它發生在每個下拉列表中，不更改值

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

點擊此處查看圖片

Answer 1

檢查過濾器的工作原理。 它應該從 DOM 中刪除行，否則如果它只是在視覺上隱藏它們（可能使用 CSS），那么您的 javascript 將始終計算所有行（我假設現在發生的情況）。