删除行时自动更改编号 [英] automatically change numbering on deleting a row

问题描述

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

I want a table row having a checked checkbox to be deleted after clicking a button. I tried the following:

$(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()
        });
    });  
});

这不是仅由于if statement中的.is(":checked")而导致，如果我将其删除，代码将为:

This is not working only because of .is(":checked") in the if statement if i remove it, the code will be:

$(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')作为所有行.

This code deletes all the rows, obviously because i did not indicate the checked checkbox. So it takes $('table input[type="checkbox"]').parent('td').parent('tr') as all the rows.

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

NOTE: Besides this, I also want the numbering alongside each checkbox to be auto-updated on deleting a row.

我的小提琴: http://jsfiddle.net/3RZWt/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 ，已将跨度添加到第一个单元格

HTML, Added span to first cell

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

演示

这篇关于删除行时自动更改编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！