动态表格如果复选框为空() td单元格与JS

Question

我有一个动态表，在一个 td 中传递 php 价格值，表末尾是这些价格的总和。每行还有一个复选框默认选中。我需要清空未选中复选框的行的内容，以便从总和计算中删除该价格值。

问题是，这会消除该值吗？我知道将 td 字段设置为隐藏不会。

值单元格：

<td style="width:10%" class="rowDataSd" id="value">

    <?php echo 

    str_replace(array(".", ",",), array("", "."), $row['rad_iznos']);

    ?>

</td>

复选框单元格：

<td style="width:3%">

<input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>">

</td>

我尝试过这个，但没有发生任何错误：

      $(document).ready(function(){

    if($("#remove").is(':checked')) {

        $("#value").show();

    } else {

        $("#value").empty();

    }

     });

我可以将唯一值传递到每个复选框并将值元素传递到 id 中，如下所示：

id="<?php echo $row['rad_id']?>"

。所以他们互相联系，但不知道如何在 JS 中说清空这些元素。

我也在考虑类似的事情，如果在某些行复选框未选中空最接近的 td 且 id="value"。我的猜测是这将是最好的解决方案，但我不知道如何写。

或者，即使未选中复选框，也将 css 类 .rowDataSd 删除到最接近的 td，id="vale" 根据计算对象进行计算。求和脚本：

       var totals=[0,0,0];

        $(document).ready(function(){

            var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

            $dataRows.each(function() {

                $(this).find('.rowDataSd').each(function(i){        

                    totals[i]+=parseFloat( $(this).html());

                });

            });

            $("#sum_table td.totalCol").each(function(i){  

                $(this).html('<span style="font-weight: bold;text-shadow: 0.5px 0 #888888;">'+totals[i].toFixed(2)+' kn</span>');

            });

        });

如图所示，如果未选中复选框，则需要从计算中删除行。请记住，我不想删除行，只需将其删除我们的计算即可。任何有关如何解决此问题的帮助都将受到赞赏。

Answer 1

这是一个基本示例。$(function() {&nbsp; function getPrice(row) {&nbsp; &nbsp; var txt = $(".price", row).text().slice(1);&nbsp; &nbsp; var p = parseFloat(txt);&nbsp; &nbsp; return p;&nbsp; }&nbsp; function calcSum(t) {&nbsp; &nbsp; var result = 0.00;&nbsp; &nbsp; $("tbody tr", t).each(function(i, r) {&nbsp; &nbsp; &nbsp; if ($("input", r).is(":checked")) {&nbsp; &nbsp; &nbsp; &nbsp; result += getPrice(r);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; return result;&nbsp; }&nbsp; function updateSum(tbl) {&nbsp; &nbsp; var t = calcSum(tbl);&nbsp; &nbsp; $("tfoot .total.price", tbl).html("$" + t.toFixed(2));&nbsp; }&nbsp; updateSum($("#price-list"));&nbsp; $("#price-list input").change(function() {&nbsp; &nbsp; updateSum($("#price-list"));&nbsp; });});#price-list {&nbsp; width: 240px;}#price-list thead th {&nbsp; width: 33%;&nbsp; border-bottom: 1px solid #ccc;}#price-list tfoot td {&nbsp; border-top: 1px solid #ccc;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="price-list">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; &nbsp; <th>&nbsp;</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="item name">Item 1</td>&nbsp; &nbsp; &nbsp; <td class="item price">$3.00</td>&nbsp; &nbsp; &nbsp; <td><input type="checkbox" checked /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="item name">Item 2</td>&nbsp; &nbsp; &nbsp; <td class="item price">$4.00</td>&nbsp; &nbsp; &nbsp; <td><input type="checkbox" checked /></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="item name">Item 3</td>&nbsp; &nbsp; &nbsp; <td class="item price">$5.00</td>&nbsp; &nbsp; &nbsp; <td><input type="checkbox" checked /></td>&nbsp; &nbsp; </tr>&nbsp; </tbody>&nbsp; <tfoot>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Sum</td>&nbsp; &nbsp; &nbsp; <td class="total price">$0.00</td>&nbsp; &nbsp; &nbsp; <td>&nbsp;</td>&nbsp; &nbsp; </tr>&nbsp; </tfoot></table>

Answer 2

这一切都归结为为复选框设置事件处理程序。事件处理程序应执行以下操作：跟踪checkbox change所有复选框的事件和DOM ready事件计算选中复选框的所有行的总和将总计设置为总计元素它还调用对未选中的行执行任何所需的更改..在下面的示例代码中未完成代码$(function() {&nbsp;&nbsp; &nbsp; $('.select').on('change', function() {&nbsp; &nbsp; &nbsp; &nbsp; let total = $('.select:checked').map(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return +$(this).parent().prev().text();&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .get()&nbsp; &nbsp; &nbsp; &nbsp; .reduce(function(sum, price) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return sum + price;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('#total').text( total );&nbsp; &nbsp; })&nbsp; &nbsp; .change();//trigger the change event on DOM ready});片段$(function() {&nbsp; &nbsp; $('.select').on('change', function() {&nbsp; &nbsp; &nbsp; &nbsp; let total = $('.select:checked').map(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return +$(this).parent().prev().text();&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .get()&nbsp; &nbsp; &nbsp; &nbsp; .reduce(function(sum, price) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return sum + price;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $('#total').text( total );&nbsp; &nbsp; })&nbsp; &nbsp; .change();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table><thead>&nbsp; <tr>&nbsp; &nbsp; <th>Item</th>&nbsp; &nbsp; <th>Price</th>&nbsp; &nbsp; <th>Select</th>&nbsp; </tr>&nbsp;</thead>&nbsp;<tbody>&nbsp; <tr>&nbsp; &nbsp; <td>Item 1</td>&nbsp; &nbsp; <td>1000</td>&nbsp; &nbsp; <td><input type="checkbox" class="select" checked></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Item 2</td>&nbsp; &nbsp; <td>1200</td>&nbsp; &nbsp; <td><input type="checkbox" class="select" checked></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Item 3</td>&nbsp; &nbsp; <td>800</td>&nbsp; &nbsp; <td><input type="checkbox" class="select" checked></td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Item 4</td>&nbsp; &nbsp; <td>102000</td>&nbsp; &nbsp; <td><input type="checkbox" class="select" checked></td>&nbsp; </tr></tbody></table><span>TOTAL</span><span id="total"></span>