Используйте JS или Jquery для вставки строк, содержащих кнопки, в HTML-таблицу.

avatar
Cobra
8 апреля 2018 в 02:54
36
1
0

Я пытаюсь создать приложение, которое помогает людям перечислять свои расходы в определенном порядке. Как я могу разрешить им добавлять строки в определенных точках?

Начнем с простой HTML-таблицы, подобной этой:

<table id='exptable'>
<tr>
  <td>(date)</td>
  <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
  <td><input type='number' value='.00'/></td>
  <td><input type='button' class='addrow' value='Add Row Below'/></td>
  <td><input type='button' class='delrow' value='Delete' /></td>
</tr>
<tr>
  <td>(date)</td>
  <td><input type='text' placeholder='Expense type (rent, groceries, etc.)'/></td>
  <td><input type='number' value='.00'/></td>
  <td><input type='button' class='addrow' value='Add Row Below'/></td>
  <td><input type='button' class='delrow' value='Delete' /></td>
</tr>
</table>

Моя "кнопка удаления" отлично работает с этим JQuery:

$('.delrow').click(function(){
    $(this).parent().parent().remove();
});

Что касается кнопки вставки, они в конечном итоге смогут изменить порядок строк, поэтому присвоение каждой строке уникального идентификатора кажется невозможным. Вот какой ужасный код у меня сейчас:

$('.addrow').click(function(){
  $("<tr><td></td><td><input type='text' placeholder='Inserted Row'/></td><td><input type='number' value='.00' class='dollar ' size='8'/></td><td><input type='button' class='addrow' value='Add Row Below'/></td><td><input type='button' class='delrow' value='Delete' /></td></tr>").insertAfter(this.parentNode.parentNode);
});

Это ДЕЙСТВИТЕЛЬНО вставляет строку туда, куда я хочу. Однако ни одна из кнопок в новом ряду не работает. Почему бы и нет? Есть ли более разумный способ вставить строку в любое место?

jsfiddle

Источник
Heretic Monkey
8 апреля 2018 в 03:00
1

Возможный дубликат привязки событий к динамически создаваемым элементам?

Ответы (1)

avatar
Alexander Nied
8 апреля 2018 в 03:13
1

Проблема в том, что ваш код, связывающий клик:

$('.delrow').click(function(){
    $(this).parent().parent().remove();
});

Работает только для тех элементов, соответствующих .delrow , которые присутствуют в DOM при вызове . Это не будет работать для любых соответствующих элементов, которые будут добавлены позже.

Вместо этого используйте делегированное событие, где вы помещаете прослушиватель на общий родитель и делегируете его целевому селектору. Что-то вроде этого:

$('#exptable').on('click', '.delrow', function(){
    $(this).parent().parent().remove();
});

... должно хватить для ваших нужд. Кроме того, я бы рекомендовал отказаться от связанного .parent().parent() и заменить его чем-то менее хрупким, например .closest: $(this).closest('tr').remove();

Gerardo BLANCO
8 апреля 2018 в 03:15
0

Узнайте что-то новое здесь jajaja. Хороший ответ!