Fatal编程技术网
  • javascript/
  • Javascript jQuery：向表中添加行并在DOM中选择它

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

javascript jquery html dom

Javascript jQuery：向表中添加行并在DOM中选择它,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我想向表中添加一行，然后将其用作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><

我想向表中添加一行，然后将其用作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
  }

函数addNewRow（addNewRowLink）
{
var currentRow=addNewRowLink.closest（'tr'）；
currentRow.after（'这是新的'）；
var newRowInDomTree=currentRow.next（'tr'）；
//这行不通
}
变量
newRowInDomTree
包含
tr.existing-row
而不是
tr.added-row
。DOM树似乎没有更新，但我不明白为什么

有什么想法吗？

您的代码应该可以工作，只是我看不到它是如何被调用的，所以我不知道
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
}

函数addNewRow（addNewRowLink）{
var currentRow=addNewRowLink.closest（'tr'）；
var newRowInDomTree=$（“这是新的”）
.insertAfter（当前行）；
//newRowInDomTree将是您创建的元素
}
我认为使用正确的功能可以简化您想要的效果：

而不是：

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

currentRow.after（'This is new'）；
你应该试试：

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

newRowInDomTree=$（“这是新的”）.insertAfter（currentRow）；
我大胆猜测，您的选择（
currentRow.next（'tr'）
）发生在元素实际添加到dom之前。您可以尝试侦听
onload
或
onreadystatechange
事件，以查看它是否稍后被触发。

您就这样做怎么样

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

$（“.existing row a”）。单击（function（）{
newRow=$（this.parent.after（'this is new'）；
});
为表指定一个id。 即


var iHtml=''；
$（'me tr:last'）。在（'iHtml'）之后；

在
之后的
语句后面缺少分号。@zzz，最好有分号，但即使你不给它也不会抛出任何错误。分号在javascript中不是必需的，但始终是添加一个分号的好做法，这样在缩小code@all：没有讨论。编辑；-）我发现，如果语句末尾没有分号，IE就会抛出一个错误。

< table id="me">

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

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

														
                                                





                                                        








                                                        

                                        
                                        

                                        
                                        
                                        
                                
                        
                
                

                        
						
                        
                        

                
                




        


这是新的asdasdasd