Question

我希望在单击按钮后删除具有选中复选框的表格行。我尝试了以下方法：

$(document).ready(function() {
    $('table tr').each(function(i){
        $(this).children('td:eq(0)').append(i+1);

        //button click
        $('.deletebtn').click(function(){     
            $('table input[type="checkbox"]').is(':checked')==true?$('table input[type="checkbox"]').is(":checked").parent('td').parent('tr').remove():$('table input[type="checkbox"]').parent('tr').show()
        });
    });  
});

这不起作用只是因为.is(":checked") if statement如果删除它，代码将是：

$(document).ready(function() {
    $('table tr').each(function(i){
        $(this).children('td:eq(0)').append(i+1);

        //button click
        $('.deletebtn').click(function(){     
            $('table input[type="checkbox"]').is(':checked')==true?$('table input[type="checkbox"]').parent('td').parent('tr').remove():$('table input[type="checkbox"]').parent('tr').show()
        });
    }); 
});

此代码删除所有行，显然是因为我没有指出选中的复选框。因此所有行都需要$('table input[type="checkbox"]').parent('td').parent('tr')。

注意：除此之外，我还希望在删除行时自动更新每个复选框旁边的编号。

我的小提琴：http://jsfiddle.net/3RZWt/1/

Answer 1

我希望在单击按钮后删除具有选中复选框的表格行。除此之外，我还希望在删除行时自动更新每个复选框旁边的编号。

代码的

$(document).ready(function () {
    //Set Numbers to span
    function AutoNumber() {
        $('table tr').each(function (i) {
            $(this).find('span').text(i);
        });
    }
    //button slick
    $('.deletebtn').click(function () {
        $('table tr').each(function (i) {
            if($(this).find('input[type="checkbox"]').is(':checked')) {
                $(this).closest('tr').remove();
            }
        });
        //After deletion
        AutoNumber();
    });
    //Call to set initially
    AutoNumber();
});

HTML ，添加了第一个单元格的范围

<tr>
    <td>
        <input type="checkbox" /><span></span>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>

DEMO

Answer 2

使用CSS作为行计数器并修改了一些代码：

--DEMO--

$(document).ready(function () {
    $('.deletebtn').click(function () {
        $('table input[type="checkbox"]').filter(':checked').closest('tr').remove();
    });
});

CSS：

table {
    width: 100%;
    counter-reset: rowNumber;
}
table tr {
    counter-increment: rowNumber;
}
table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

删除行时自动更改编号

2 个答案:

--DEMO--