如何使用 jQuery 将行附加到表中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2160890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you append rows to a table using jQuery?
提问by Amit
Hi I was trying to add a row to a table using jQuery, but it is not working.
What might be the reason?
嗨，我正在尝试使用 jQuery 向表中添加一行，但它不起作用。
可能是什么原因？
And, can I put in some value to the newly added row..?
而且，我可以为新添加的行添加一些值吗？
Here is the code:
这是代码：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('a').click(function() {
$('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
<title></title>
</head>
<body>
<a href="">Link</a>
<table id="myTable">
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</body>
</html>
采纳答案by Dominic Barnes
I'm assuming you want to add this row to the <tbody>element, and simply using append()on the <table>will insert the <tr>outside the <tbody>, with perhaps undesirable results.
我假设您想将此行添加到<tbody>元素中，并且简单地使用append()on<table>将插入<tr>外部<tbody>，可能会产生不良结果。
$('a').click(function() {
$('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});
EDIT:Here is the complete source code, and it does indeed work: (Note the $(document).ready(function(){});, which was not present before.
编辑：这是完整的源代码，它确实有效：（注意$(document).ready(function(){});之前不存在的 。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>');
});
});
</script>
<title></title>
</head>
<body>
<a href="javascript:void(0);">Link</a>
<table id="myTable">
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
回答by Amit
The following code works
以下代码有效
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function AddRow()
{
$('#myTable').append('<tr><td>test 2</td></tr>')
}
</script>
<title></title>
</head>
<body>
<input type="button" id="btnAdd" onclick="AddRow()"/>
<a href="">test</a>
<table id="myTable">
<tbody >
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</body>
</html>
Note this will work as of jQuery 1.4even if the table includes a <tbody>element:
请注意，即使表格包含<tbody>元素，这也适用于 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
<tr>and inserts it into the first<tbody>in your table or wraps it into a new<tbody>if one doesn't exist.
jQuery的自1.4版本（？）会自动检测，如果你想插入（使用任何附加的（），前置（），（）之前，或之后（）方法）的元素是一个
<tr>，并将其插入到第一个<tbody>在你的如果表<tbody>不存在，则将其包装成一个新表。
回答by Yusril Herlian Syah
I always use this code below for more readable
我总是使用下面的代码来提高可读性
$('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(''));
or if it have tbody
或者如果它有 tbody
$('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(''));
回答by Naveen Kumar
Maybe this is the answer you are looking for. It finds the last instance of <tr />and appends the new row after it:
也许这就是您正在寻找的答案。它找到的最后一个实例<tr />并在其后追加新行：
<script type="text/javascript">
$('a').click(function() {
$('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
回答by rsilva4
You should append to the table and not the rows.
您应该附加到表而不是行。
<script type="text/javascript">
$('a').click(function() {
$('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
回答by Punit Rathore
Try:
尝试：
$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");
And in the partial, you should have:
而在partial，你应该有：
<td>row1</td>
<td>row2</td>
回答by Super Model
Tested & Working
测试和工作
To add as first row in table
添加为表中的第一行
$(".table tbody").append("<tr><td>New row</td></tr>");
To add as last row in table
添加为表中的最后一行
$(".table tbody").prepend("<tr><td>New row</td></tr>");
