动态表格如果复选框为空() 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() {

  function getPrice(row) {

    var txt = $(".price", row).text().slice(1);

    var p = parseFloat(txt);

    return p;

  }

  function calcSum(t) {

    var result = 0.00;

    $("tbody tr", t).each(function(i, r) {

      if ($("input", r).is(":checked")) {

        result += getPrice(r);

      }

    });

    return result;

  }

  function updateSum(tbl) {

    var t = calcSum(tbl);

    $("tfoot .total.price", tbl).html("$" + t.toFixed(2));

  }

  updateSum($("#price-list"));

  $("#price-list input").change(function() {

    updateSum($("#price-list"));

  });

});

#price-list {

  width: 240px;

}

#price-list thead th {

  width: 33%;

  border-bottom: 1px solid #ccc;

}

#price-list tfoot td {

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

  <thead>

    <tr>

      <th>Name</th>

      <th>Price</th>

      <th>&nbsp;</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="item name">Item 1</td>

      <td class="item price">$3.00</td>

      <td><input type="checkbox" checked /></td>

    </tr>

    <tr>

      <td class="item name">Item 2</td>

      <td class="item price">$4.00</td>

      <td><input type="checkbox" checked /></td>

    </tr>

    <tr>

      <td class="item name">Item 3</td>

      <td class="item price">$5.00</td>

      <td><input type="checkbox" checked /></td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td>Sum</td>

      <td class="total price">$0.00</td>

      <td>&nbsp;</td>

    </tr>

  </tfoot>

</table>

Answer 2

这一切都归结为为复选框设置事件处理程序。事件处理程序应执行以下操作：

• 跟踪checkbox change所有复选框的事件和DOM ready事件

• 计算选中复选框的所有行的总和

• 将总计设置为总计元素

• 它还调用对未选中的行执行任何所需的更改..在下面的示例代码中未完成

代码

$(function() { 

    $('.select').on('change', function() {

        let total = $('.select:checked').map(function() {

            return +$(this).parent().prev().text();

        })

        .get()

        .reduce(function(sum, price) {

            return sum + price;

        });

        $('#total').text( total );

    })

    .change();//trigger the change event on DOM ready

});

片段

$(function() {

    $('.select').on('change', function() {

        let total = $('.select:checked').map(function() {

            return +$(this).parent().prev().text();

        })

        .get()

        .reduce(function(sum, price) {

            return sum + price;

        });

        $('#total').text( total );

    })

    .change();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

<thead>

  <tr>

    <th>Item</th>

    <th>Price</th>

    <th>Select</th>

  </tr>

 </thead>

 <tbody>

  <tr>

    <td>Item 1</td>

    <td>1000</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

  <tr>

    <td>Item 2</td>

    <td>1200</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

  <tr>

    <td>Item 3</td>

    <td>800</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

  <tr>

    <td>Item 4</td>

    <td>102000</td>

    <td><input type="checkbox" class="select" checked></td>

  </tr>

</tbody>

</table>

<span>TOTAL</span><span id="total"></span>