1

同じ行の列から画像をクリックして行を削除するにはどうすればよいですか?

これは行を追加するためのコードです

function addrow() {
    var table = document.getElementById("tablelist");
    var row = table.insertRow(-1);
    var cells = new Array();
    for (var i = 0; i < 6; i++) {
        cells[i] = row.insertCell(i);
        cells[i].innerHTML = "New";
    }
    cells[6] = row.insertCell(6);
    cells[6].innerHTML = '<img id="pencil" src="images/pencil-black.png"></img><img id="lock" src="images/lock-black.png"></img><img id="bin" src="images/bin-black.png"></img>';
}

これは私のjqueryコードですが、うまくいきません。

$(document).ready(function() {
    $(".userbox").on({
        mouseenter : function() {
            $(this).find('img').each(function() {
                $(this)
                .attr(
                    'src',
                    $(this).attr('src').replace('-black.png',
                                                '-white.png'));
            });
        },
        mouseleave : function() {
            $(this).find('img').each(function() {
                $(this)
                .attr(
                    'src',
                    $(this).attr('src').replace('-white.png',
                                                '-black.png'));
            });
        }
    }, 'tr');

    $("tr").on('tr', '.bin', function() {
        $(this).slideUp();
    });

});

注:.slideUp()行を削除していないことは承知しています。

4

2 に答える 2

3

id はドキュメント内で一意でなければならないため、クラス属性に変更する必要があります

次に、委任されたイベント登録を使用する必要があります

$('#tablelist').on('click', '.bin', function(){
    $(this).closest('tr').slideUp();
})

デモ:フィドル

于 2013-06-28T08:31:57.937 に答える