通过表行列表中途添加tr元素的最佳方式 - jQuery

该网站的首个帖子！通过表行列表中途添加tr元素的最佳方式 - jQuery

<table id="content"> 
<tr class="item"> 
<td><p>header content</p></td> 
</tr> 
<tr class="item"> 
<td><p>footer content</p></td> 
</tr> 
</table>

我加入使用jQuery用下面的代码要素：

$('<tr class="item" />').insertAfter('#content tr:first');

通过一个简单的表像下一个

我在寻找一些帮助插入TR元素中途使用此命令将一个元素后

不过，我想补充一些（但最后添加的项目之后，而不是在列表的顶部）

我肯定有简单的方法（例如，通过为页脚元素分配一个id，并使用.insertBefore（'＃footer'）），但了解一些可以使用的不同技术会很有趣。提前致谢！ :)

来源

2010-05-22 soulBit

如果该行会一直尾行前分配给该元素，那么你的想法添加一个ID似乎合理。

如果您不想使用ID，请使用类似于您的:first选择器的想法。做insertBefore('#content tr:last');

$('<tr class="item" />').insertBefore('#content tr:last');

来源

2010-05-22 21:07:15 user113716

我真的很喜欢这个解决方案，它几乎正是我想到的时候想到的一个列表没有页脚元素/ ID – soulBit 2010-05-22 21:13:56

很高兴为你工作。 :) – user113716 2010-05-22 21:24:30

的:eq选择应该在你的情况是很方便：

// insert after first row 
$('<tr class="item" />').insertAfter('#content tr:eq(0)'); 
// insert after second row 
$('<tr class="item" />').insertAfter('#content tr:eq(1)'); 
// insert after third row 
$('<tr class="item" />').insertAfter('#content tr:eq(2)'); 
// and so on

来源

2010-05-22 20:52:17

谢谢，这样的工作 - 得到它动态地各行添加我想我可以使用.size（）得到的行数时工作，并减去2以在插页行之前插入。虽然 – soulBit 2010-05-22 21:02:40

@soulBit：Yup的休息应该很简单......... – 2010-05-22 21:03:20

从可能性的角度来看，你可以这样做，但最佳做法将表明，最好能够先建立所有的HTML，然后注入它。

所以，这样的事情将是最好的

$('#content tr:first').after(function(){ 
    var html = ""; 
    for(var i = 0; i < NUM_OF_ROWS; i++) { 
    html += '<tr class="item" />'; 
    } 
    return html; 
});

这样，只有一个访问DOM，这一切都漂亮了功能于一体。

（这确实需要的1.4.x虽然）

来源

2010-05-22 21:07:56

通过表行列表中途添加tr元素的最佳方式 - jQuery

回答

相关问题