javascript - 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
}