如何使用 jQuery 将行追加到表中?

Posted

技术标签:

【中文标题】如何使用 jQuery 将行追加到表中?【英文标题】:How do you append rows to a table using 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>

【问题讨论】:

见:***.com/a/50365764/7186739 【参考方案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,即使表格包含&lt;tbody&gt; 元素:

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

【讨论】:

以下也可以使用 var value1 = 1; $('#myTable').append('' + value1+'')【参考方案5】:

也许这就是您正在寻找的答案。它找到&lt;tr /&gt; 的最后一个实例,并在其后追加新行:

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

【讨论】:

【参考方案6】:

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

$('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) 你自己的代码与我的解决方案或多米尼克解决方案,你会看到有效。

以上是关于如何使用 jQuery 将行追加到表中?的主要内容,如果未能解决你的问题,请参考以下文章

使用 tablesorter 和 pager 将行添加到表中

Jquery在某个索引处将新行插入表中

AJAX如何动态地将行添加到表中

使用 jQuery 将新行追加到表中 [重复]

使用 jquery 在 HTML 表中追加行不起作用

使用ajax jQuery for-each函数在表中追加多个数据