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>

我在jQuery中使用以下JavaScript来插入一行：

  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 ');

jQuery：向表中添加行并在DOM中选择它

4 个答案: