可以删除tr的脚本也从总数中减去

Question

我正在使用一个表单来增加人工和它的价格，同时显示在下面同一页面上分配给它的人工。

我想要的是： 当用户点击删除时，它会删除table.tr并从表格末尾的总值中减去人工成本。

$('.dropdown').on('mouseenter mouseleave click tap', function(event) {
  if (!$('.navbar-toggle').is(':visible')) {
    $(this).toggleClass("open");
  }
});

问题是：正如你可以看到pic中的总金额是错误的，它应该是b 3500但是它的3700.因为我从表中删除了200个成本劳动力。 tr已删除，但费用未从总额中扣除。如何只需点击一下即可完成此操作？

 while($row2 = $result2->fetch_assoc()){    
$serial=$serial+1;                  
$Total=$row2["cost"]+$Total;                                       
                       echo  "<tr >
                          <th scope='row'>",$serial,"</th>
                          <td>",$row2["Labor"],"</td>
                          <td>",$row2["type"],"</td>
                          <td id='cost'>",$row2["cost"],"</td>
                          <td><span class='action'><a href='#' id='",$row2["Labor_id"],"'  class='delete' title='Delete'>Delete</a></span></td>
                        </tr>";

 }
                            echo "<tr><td></td><td></td>
                          <th align='right'>Total</th>
                          <th id='total'>",$Total,"</th>
                        </tr>";

 } 

Answer 1

1）id应该是唯一的，所以将其更改为类名<td class='cost'>",$row2["cost"],"</td>

2）删除 tr 后再次使用每个函数

求和

 var total=0;
$('.cast').each(function(){ total=total+parseInt($(this).text().trim()); });
$('#total').text(total);

Answer 2

在delete_labor.php结束时，您可以回显新的费用，然后在success（）方法中将其恢复。

Answer 3

首先，将属性从<td id='cost'>".$row2["cost"]."</td>更改为<td class='cost'>".$row2["cost"]."</td>

我很惊讶逗号是如何工作而不是点!!

您可以在成功时从delete_labor.php获取总数，并可以使用jquery将其放入总框中。

另一种方法，计算HTML类“费用”的费用总和，并将其更新为总框。

修改

function get_total(){
        var main_total = 0;
        if($('.cost').length > 0){
           $('.cost').each(function(i){
                main_total += parseInt( $(this).html())
           }); 
        }
        $('#total').html(main_total);
    }

在$(this).closest("tr").remove();之后调用此函数 所以，你的代码将是：

$(this).closest("tr").remove();
get_total();

Answer 4

你应该在删除行后再次在delete_labor.php中总计并返回以响应在总div中再次显示它。

Answer 5

尝试下面的代码。只需更改补丁

   <td id='cost'>",$row2["cost"],"<input type='hidden' class='cost' value='".$row2["cost"]."'/></td> 

添加输入类型隐藏

$.ajax({
            type: "POST",
            url: "delete_labor.php",
            data: info,
            success: function () {
  var sum = 0;
  $('.cost').each(function(){
  sum += parseFloat($(this).text());  // Or this.innerHTML, this.innerText
});
$('#total').text(sum);
}
        });