jQuery: добавить строку в таблицу и выделить ее в DOM

Question

Я хочу добавить строку в таблицу, а затем использовать ее в качестве объекта DOM. Предположим, следующий HTML:

<table>
  <tr class="existing-row"><td>
      <a>add new row</a>
  </td></tr>
  <tr class="existing-row"><td>
      <a>add new row</a>
  </td></tr>
</table>

Я использую следующий JavaScript с jQuery для вставки строки:

  function addNewRow(addNewRowLink)
  {
    var currentRow = addNewRowLink.closest('tr');
    currentRow.after('<tr class="added-row"><td>This is new</td></tr>');

    var newRowInDomTree = currentRow.next('tr');
    //This does not work
  }

Переменная newRowInDomTree содержит tr.existing-row вместо tr.added-row. Кажется, что дерево DOM не обновляется, но я не понимаю, почему.

Есть идеи?

Answer 1

Ваш код должен работать, за исключением того, что я не вижу, как он вызывается, поэтому я не знаю, что такое addNewRowLink.

Альтернативой может быть сохранение ссылки нановый элемент при его создании.Как это:

function addNewRow(addNewRowLink) {
    var currentRow = addNewRowLink.closest('tr');
    var newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>')
                               .insertAfter( currentRow );
    // newRowInDomTree will be the element you created
}

Answer 2

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

вместо:

currentRow.after('<tr class="added-row"><td>This is new</td></tr>');

, вам следует попробовать:

newRowInDomTree = $('<tr class="added-row"><td>This is new</td></tr>').insertAfter(currentRow);

Рискну предположить, что ваш выбор (currentRow.next('tr')) происходит до того, как элемент действительно добавляется в DOM.Вы можете попробовать прослушать событие onload или onreadystatechange, чтобы увидеть, будет ли оно запущено позже.

Answer 3

Дайте идентификатор таблице. то есть

< table id="me">

var iHtml = ' < tr class="added-row">< td>This is new asdasdasd< /td>< /tr>' ;

$('#me tr:last').after('iHtml ');

Answer 4

Как насчет того, чтобы сделать это так?

$(".existing-row a").click(function() {
 newRow = $(this).parent.after('<tr class="added-row"><td>This is new</td><tr>');
});