Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

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

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

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.

My fiddle: http://jsfiddle.net/3RZWt/1/

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
169 views
Welcome To Ask or Share your Answers For Others

1 Answer

I want a table row having a checked checkbox to be deleted after clicking a button. Besides this, I also want the numbering alongside each checkbox to be auto-updated on deleting a row.

Code

$(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, Added span to first cell

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

DEMO


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
...