我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
为了在这个主题上添加一个好例子,如果您需要在特定位置添加一行,这里有一个有效的解决方案。
额外的行添加在第5行之后,如果少于5行,则添加在表的末尾。
var ninja_row = $('#banner_holder').find('tr');
if( $('#my_table tbody tr').length > 5){
$('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
$('#my_table tr:last').after(ninja_row);
}
我把内容放在桌子下面一个现成的(隐藏的)容器上。。因此,如果您(或设计师)必须更改,则无需编辑JS。
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
其他回答
为了在这个主题上添加一个好例子,如果您需要在特定位置添加一行,这里有一个有效的解决方案。
额外的行添加在第5行之后,如果少于5行,则添加在表的末尾。
var ninja_row = $('#banner_holder').find('tr');
if( $('#my_table tbody tr').length > 5){
$('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
$('#my_table tr:last').after(ninja_row);
}
我把内容放在桌子下面一个现成的(隐藏的)容器上。。因此,如果您(或设计师)必须更改,则无需编辑JS。
<table id="banner_holder" style="display:none;">
<tr>
<td colspan="3">
<div class="wide-banner"></div>
</td>
</tr>
</table>
我发现这个AddRow插件对于管理表行非常有用。不过,如果您只需要添加一行,Luke的解决方案将是最合适的。
您可以使用这个很棒的jQuery添加表行函数。它适用于有<tbody>但没有的表。它还考虑了最后一行表格的列跨度。
下面是一个示例用法:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
所以,自从@Luke Bennett回答这个问题后,情况就发生了变化。这里有一个更新。
jQuery自1.4版(?)起自动检测您试图插入的元素(使用append()、prepend()、before()或after()方法中的任何一种)是否是<tr>,并将其插入到表中的第一个<tbody>中,如果不存在,则将其包装到新的<tbody中。
因此,是的,您的示例代码是可以接受的,并且可以与jQuery1.4+一起工作。;)
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
<tr id="tablerow"></tr>
$('#tablerow').append('<tr>...</tr><tr>...</tr>');