我使用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>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
如果您有另一个变量,您可以在<td>标记中访问,就像那样。
这样我希望会有帮助
var table = $('#yourTableId');
var text = 'My Data in td';
var image = 'your/image.jpg';
var tr = (
'<tr>' +
'<td>'+ text +'</td>'+
'<td>'+ text +'</td>'+
'<td>'+
'<img src="' + image + '" alt="yourImage">'+
'</td>'+
'</tr>'
);
$('#yourTableId').append(tr);
其他回答
jQuery有一个内置的工具,可以随时操作DOM元素。
您可以像这样向表中添加任何内容:
$("#tableID").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'img.png')
.text('Image cell')
)
)
);
jQuery中的$(“<some tag>”)是一个标记对象,它可以有几个可以设置和获取的attr属性,以及文本,它表示标记之间的文本:<tag>text</tag>。
这是一些非常奇怪的缩进,但您更容易看到这个示例中的情况。
提示:通过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);
由于我也有一种方法在最后或任何特定位置添加行,所以我认为我也应该分享这一点:
首先找出行的长度:
var r=$("#content_table").length;
然后使用以下代码添加行:
$("#table_id").eq(r-1).after(row_html);
你建议的方法并不一定能给你带来你想要的结果——例如,如果你有一个tbody:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
您将得到以下结果:
<table id="myTable">
<tbody>
<tr>...</tr>
<tr>...</tr>
</tbody>
<tr>...</tr>
</table>
因此,我建议采用以下方法:
$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');
您可以在after()方法中包含任何内容,只要它是有效的HTML,包括上面示例中的多行。
更新:在最近使用此问题进行活动后,重新审视此答案。无眼是一个很好的评论,即DOM中总会有一个tbody;这是正确的,但前提是至少有一行。如果没有行,除非您自己指定了一行,否则不会有tbody。
DaRKoN_建议在tbody之后添加内容,而不是在最后一个tr之后添加内容。这解决了没有行的问题,但仍然不可靠,因为理论上可以有多个tbody元素,行将添加到每个元素中。
权衡一切,我不确定是否有一个单一的单线解决方案能够解决每一种可能的情况。您需要确保jQuery代码与标记相符。
我认为最安全的解决方案可能是确保您的表始终在标记中包含至少一个tbody,即使它没有行。在此基础上,您可以使用以下方法,无论您有多少行(也可以考虑多个tbody元素)都可以使用:
$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
对于此处发布的最佳解决方案,如果最后一行上有一个嵌套表,则新行将添加到嵌套表而不是主表。快速解决方案(考虑带/不带tbody的表和带嵌套表的表):
function add_new_row(table, rowcontent) {
if ($(table).length > 0) {
if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
}
}
用法示例:
add_new_row('#myTable','<tr><td>my new row</td></tr>');