Как сгенерировать кнопку с событием и таблицей с помощью jquery

Question

Я генерирую таблицу с jquery, и я создаю кнопку и помещаю ее в каждую строку этой таблицы. Я хочу установить событие для этих кнопок, каждый раз, когда каждый из них щелкнул, удалите эту конкретную строку, что кнопка находится там
вот мой код:

$("#table_sample").append("<tr>" + 
    "<td>" + value1 + "</td>" + 
    "<td>" + value2 + "</td>" + 
    "<td>" + value3 + "</td>" + 
    "<td>" + "<button type='button' class='col-sm-7 btn btn-danger pull-right'>delete</button> " + 
    "</td></tr>"); 

есть ли способ, который может установить событие для каждого из них, которые могут удалять свои ряды?

Answer 1

Попробуйте использовать .closest(), чтобы захватить родительскую строку кнопки щелкнутой,

$('#table_sample').on('click','tr td :button:contains(delete)',function(e){ 
    $(this).closest('tr').remove(); 
}); 

И заметьте, что мы использовали event delegation здесь, так как эти кнопки создаются на время выполнения.

Специального примечание: Я использовал селектор :contains() здесь, потому что я не знаю точную идентичность этих кнопок, вы должны иметь некоторый общий идентифицирующий класс к ним, использовать это вместо.

Answer 2

Вы можете использовать closest() для ориентации родительской строки.

$("#table_sample").on('click','.btn-danger',function(){ 
    $(this).closest('tr').remove(); 
}); 

Обратите внимание, что вы также делегировать нужду событие на динамически создаваемых элементов с использованием метода .on() (Предполагая, что вы используете JQuery версии 1.71 или более поздней версии)

Answer 3

Вы можете попробовать что-то вроде этого:

$("#myButton").click(function() 
{ 
    var test = $('<button/>', 
    { 
     text: 'Test', 
     click: function() { alert('hi'); } 
    }); 

    var parent = $('<tr><td></td></tr>').children().append(test).end(); 

    $("#addNodeTable tr:last").before(parent); 
}); 

Или

$("#myButton").click(function() 
{  
    var test = $('<button/>', 
    { 
     text: 'Test', 
     click: function() { alert('hi'); } 
    }).wrap('<tr><td></td></tr>').closest('tr'); 

    $("#addNodeTable tr:last").before(test); 
});