删除表格行时重新计算总计

时间:2016-02-01 18:13:48

标签: javascript jquery row html-table delete-row

这是fiddle。我想要的是在删除行时重新计算总数。我试过这个,但它不起作用:

tot -= parseInt(table.rows[i].cells[1].innerHTML)
        table.deleteRow(i);
                rowCount--;
                i--;

这是我的代码:

<div class="lorr">
     <table id="myTable" border="1">
                                
     </table>
     <br />
</div>
<button id="deletes">Remove Checked</button>
<button type="button" onclick="displayResult()">Insert new row</button>    
<div id="total">
</div>

<script type="text/javascript">
    function displayResult()
    {
    var swap = '<input type="checkbox" class="escondeyou">';
    var table = document.getElementById("myTable");
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);    
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = swap+"NEW CELL1ffffffffffffffffff ui7iytuiui riuiui ri";
    cell2.innerHTML = "600";
    cell2.style.fontWeight="bold";
    cell2.style.wordBreak="keep-all";
    var tot = "RD$"+document.getElementById("total").innerHTML;
    // ******************** Important part ******************************
    var tot=0; 
        for(var i=0;i<=rowCount;i++){
        tot += parseInt(table.rows[i].cells[1].innerHTML);      
    }
    document.getElementById("total").innerHTML=tot;
    };


</script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

这是有效的:http://jsfiddle.net/joansuriel/QmHdL/50/

2 个答案:

答案 0 :(得分:1)

以下是您的点击处理程序应该执行的操作,而不会更改太多代码。请注意,您可以重复使用calcTotal但是要小心,我会循环直到i&lt; table.rows.length

$('#deletes').click(function(){

    $("table input[type='checkbox']:checked").parent().parent().remove();
    calcTotal(document.getElementById("myTable"), document.getElementById("total"));
});

function calcTotal(table, total){
    var tot = 0;
    for(var i=0;i<table.rows.length;i++){
        tot += parseInt(table.rows[i].cells[1].innerHTML);      
    }
    total.innerHTML=tot;
}

答案 1 :(得分:0)

所以你有一个删除方法,只需用它做点什么。

您的代码:

$('#deletes').click(function(){
  $("table input[type='checkbox']:checked").parent().parent().remove();
});

更改为:

$('#deletes').click(function(){
  $("table input[type='checkbox']:checked").parent().parent().remove();
  var $table = document.getElementById("myTable");
  var total = 0;
  for (var i=0; i < $table.rows.length; i++) {
    var currentRow = $table.rows[i];
    total = total + parseInt(currentRow.cells[currentRow.cells.length - 1].innerHTML);
  }

  document.getElementById("total").innerHTML = total.toString();
});

如果您有任何问题,请评论我。