我使用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>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
提示:通过innerHTML或.html()在html表中插入行在某些浏览器中是无效的(类似于IE9),在任何浏览器中使用.append(“<tr></tr>”)都不是很好的建议。最好和最快的方法是使用纯javascript代码。
要以这种方式与jQuery结合,只需添加类似于jQuery的新插件:
$.fn.addRow=function(index/*-1: add to end or any desired index*/, cellsCount/*optional*/){
if(this[0].tagName.toLowerCase()!="table") return null;
var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
return $(r);
};
现在在整个项目中使用它,类似于:
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);
其他回答
我遇到了一些相关的问题,试图在单击的行之后插入一个表行。除了.after()调用对最后一行不起作用之外,一切都很好。
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
我想出了一个非常不整洁的解决方案:
按如下方式创建表(每行的id):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
等
然后:
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
也可以这样做:
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")
如果你有一个<tbody>和一个<tfoot>呢?
例如:
<table>
<tbody>
<tr><td>Foo</td></tr>
</tbody>
<tfoot>
<tr><td>footer information</td></tr>
</tfoot>
</table>
然后它将在页脚中插入新行,而不是插入正文。
因此,最好的解决方案是包含<tbody>标记并使用.append,而不是.after。
$("#myTable > tbody").append("<tr><td>row content</td></tr>");
如果要在<tr>第一个子项之前添加行。
$("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");
如果要在<tr>最后一个子项之后添加行。
$("#myTable > tbody").append("<tr><td>my data</td><td>more data</td></tr>");
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
使用javascript函数编写
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';