在删除1个或更多行然后显示合计后如何显示合计行?

时间:2019-01-15 20:27:06

标签: javascript jquery html

如何在删除1个或更多行后显示总计行,然后显示总计?

我有一个动态表,该表添加行并显示总行。删除1或2行后如何显示总数?

Table Preview

<script type="text/javascript">

var table = document.getElementById('table'),rIndex;
$(document).ready(function(){
    var rowCount;

    $(".add-row").bind('click', function() {
        var OS = $("#OS").val();
        var vCPU = $("#vCPU").val();
        var Memory = $("#Memory").val();
        var Val = $("#Val").val();
        var Performance = $("#Performance").val();
        var HighWrite = $("#HighWrite").val();
        var markup 
        = "<tr onclick = 'clickRow(this)'><td><input   type='checkbox'   name='record'></td><td>" + OS + "</td><td>" + vCPU + "</td><td>" + Memory + "</td><td>" + Val + "</td><td>" + Performance + "</td><td>" + HighWrite + "</td></tr>";

        $("table tbody").append(markup);


         rowCount = $('table tbody tr').length;
         rowCount = rowCount-1;
          $('#counter').html(rowCount);


    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){

                $(this).parents("tr").remove();


            }
        });
    });



}); 

1 个答案:

答案 0 :(得分:1)

稍作修改,您的代码。不需要加长,只需在计数器上加一,或在删除时减一。

var table = document.getElementById('table'),rIndex;

$(document).ready(function(){
    var rowCount  = 0;

    $(".add-row").bind('click', function() {
        var OS = $("#OS").val();
        var vCPU = $("#vCPU").val();
        var Memory = $("#Memory").val();
        var Val = $("#Val").val();
        var Performance = $("#Performance").val();
        var HighWrite = $("#HighWrite").val();
        var markup 
        = "<tr onclick = 'clickRow(this)'><td><input   type='checkbox'   name='record'></td><td>" + OS + "</td><td>" + vCPU + "</td><td>" + Memory + "</td><td>" + Val + "</td><td>" + Performance + "</td><td>" + HighWrite + "</td></tr>";

        $("table tbody").append(markup);


         rowCount++;
          $('#counter').html(rowCount);


    });

    // Find and remove selected table rows
    $(".delete-row").click(function(){
        $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
                rowCount--;
                $('#counter').html(rowCount);
            }
        });
    });



});