如何使用 jQuery 将行追加到表中？答案

【问题标题】：How do you append rows to a table using jQuery?如何使用 jQuery 将行追加到表中？
【发布时间】：2011-01-10 18:42:27
【问题描述】：

您好，我正在尝试使用 jQuery 向表中添加一行，但它不起作用。
可能是什么原因？

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

代码如下：

<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>

【问题讨论】：

见：stackoverflow.com/a/50365764/7186739

标签： jquery html

【解决方案1】：

添加为表格的第一行或最后一行

添加到表格的第一行

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

添加到表格的最后一行

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

【讨论】：

【解决方案2】：

为了提高可读性，我总是使用下面的这段代码

$('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

$('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(''));

【讨论】：

【解决方案3】：

试试：

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

在partial 中，你应该有：

<td>row1</td>
<td>row2</td>

【讨论】：

【解决方案4】：

以下代码有效

<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>

请注意this will work as of jQuery 1.4，即使表格包含<tbody> 元素：

jQuery 从 1.4(?) 版开始自动检测您尝试插入的元素（使用任何 append()、prepend()、before() 或 after() 方法）是否为 <tr> 并插入将其放入表中的第一个 <tbody> 中，如果不存在，则将其包装到新的 <tbody> 中。

【讨论】：

以下也可以使用 var value1 = 1; $('#myTable').append('' + value1+'')

【解决方案5】：

也许这就是您正在寻找的答案。它找到<tr /> 的最后一个实例，并在其后追加新行：

<script type="text/javascript">
    $('a').click(function() {
        $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
    });
</script>

【讨论】：

【解决方案6】：

我假设您想将此行添加到 <tbody> 元素中，并且只需在 <table> 上使用 append() 就会将 <tr> 插入到 <tbody> 之外，这可能会产生不良结果。

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

编辑：这是完整的源代码，它确实有效：（注意$(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>

【讨论】：

根据我的经验，您无法修改表格的 html 内容。尝试使用 document.createElement("tr") 和 document.appendElement()
我修改了您的源代码，使其能够正常工作。（注意上面的编辑）我之前没有注意到这一点，但你没有包含$(document).ready()，这基本上破坏了一切。除非您等待ready() 事件触发，否则不会加载 DOM，并且您的 jQuery 选择器可能找不到它要查找的内容。
不要忘记在源示例中包含“tbody”。

【解决方案7】：

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

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

【讨论】：

好的，你做错了，请在此处检查 (secretgeek.net/rtjqe/realtimejqueryeditor.htm) 你自己的代码与我的解决方案或多米尼克解决方案，你会看到有效。