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

你这样做怎么样？

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

Answer 4

给表提供一个id。 即

< table id="me">

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

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