我使用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>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
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>。
这是一些非常奇怪的缩进,但您更容易看到这个示例中的情况。
其他回答
所以,自从@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>');
)达里尔:
您可以使用appendTo方法将其附加到tbody,如下所示:
$(() => {
$("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});
您可能希望使用最新的JQuery和ECMAScript。然后可以使用后端语言将数据添加到表中。也可以将其包装在变量中,如下所示:
$(() => {
var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
t_data.appendTo('tbody');
});
我尝试过最受欢迎的一种,但它对我不起作用,但下面的效果很好。
$('#mytable tr').last().after('<tr><td></td></tr>');
即使那里有一个雪橇,它也会起作用。
我知道您要求使用jQuery方法。我看了很多,发现我们可以通过下面的函数以比直接使用JavaScript更好的方式来实现。
tableObject.insertRow(index)
index是一个整数,指定要插入的行的位置(从0开始)。也可以使用-1的值;这导致新行将被插入最后的位置。
此参数在Firefox和Opera中是必需的,但在Internet Explorer、Chrome和Safari中是可选的。
如果省略此参数,insertRow()将在Internet Explorer中的最后一个位置以及Chrome和Safari中的第一个位置插入新行。
它将适用于HTML表的所有可接受结构。
以下示例将在last中插入一行(-1用作索引):
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br />
<button type="button" onclick="displayResult()">Insert new row</button>
</body>
</html>
我希望这有帮助。
您可以使用这个很棒的jQuery添加表行函数。它适用于有<tbody>但没有的表。它还考虑了最后一行表格的列跨度。
下面是一个示例用法:
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));