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树没有更新，但我不明白为什么会这样。

有任何想法吗？

- Daniel Peñalba

---

在 after 语句后面你缺少了一个分号。 - zzzzBov

@zzz，最好加上分号，但即使您不加，它也不会抛出任何错误。 - kobe

在 JavaScript 中分号不是必需的，但是加上分号总是一个好习惯，这样在代码压缩时就不会出现错误。 - MJC

@所有人：无需讨论。已编辑；-) - Daniel Peñalba

我发现如果语句结尾没有分号，IE会抛出错误。 - Nalum

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
}

- user113716

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 事件，看看它是否稍后被触发。

- zzzzBov

Answer 3

你觉得这样做怎么样？

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

- halfpastfour.am

Answer 4

给表格一个ID。 例如，

< table id="me">

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

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

- cmani