关于html：如何使用jQuery将行追加到表中？

How do you append rows to a table using jQuery?

嗨，我试图使用jQuery向表添加一行，但它无法正常工作。
可能是什么原因？

而且，我可以为新添加的行添加一些值吗？

这是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
$('a').click(function() {
$('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>');
});

</head>
<body>
Link
<table id="myTable">
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</body>
</html>

相关讨论

我假设您要将此行添加到

元素，并且只需在

上使用append()就会在

之外插入

，这可能会产生不良结果。

1
2
3

$('a').click(function() {
$('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});

编辑：这是完整的源代码，它确实有效:(注意$(document).ready(function(){});，之前没有。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});
});

</head>
<body>
Link
<table id="myTable">
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>

相关讨论

以下代码有效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
<head>
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
function AddRow()
{
$('#myTable').append('<tr><td>test 2</td></tr>')
}

</head>
<body>
<input type="button" id="btnAdd" onclick="AddRow()"/>
test
<table id="myTable">
<tbody >
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</body>
</html>

请注意，即使表中包含

元素，这也适用于jQuery 1.4：

jQuery since version 1.4(?) automatically detects if the element you are trying to insert (using any of the append(), prepend(), before(), or after() methods) is a
and inserts it into the first
in your table or wraps it into a new
if one doesn't exist.

相关讨论

也许这就是你要找的答案。它找到

的最后一个实例并在其后附加新行：

1
2
3
4

我总是使用下面的代码更具可读性

1
2
3
4
5
6
7
8

$('table').append([
'<tr>',
'<td>My Item 1</td>',
'<td>My Item 2</td>',
'<td>My Item 3</td>',
'<td>My Item 4</td>',
'</tr>'
].join(''));

或者如果它有tbody

1
2
3
4
5
6
7
8

$('table').find('tbody').append([
'<tr>',
'<td>My Item 1</td>',
'<td>My Item 2</td>',
'<td>My Item 3</td>',
'<td>My Item 4</td>',
'</tr>'
].join(''));

相关讨论

您应该附加到表而不是行。

1
2
3
4

相关讨论

尝试：

1	$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");

在partial中，您应该：

1 2	<td>row1</td> <td>row2</td>

我想在bootstrap中使用这种类型的表

enter image description here

经过测试和工作

要添加为表格中的第一行

1	$(".table tbody").append("<tr><td>New row</td></tr>");

要添加为表格中的最后一行

1	$(".table tbody").prepend("<tr><td>New row</td></tr>");