代码之家 › 专栏 › 技术社区 › Amit

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

html jquery

Amit · 技术社区 · 16 年前

嗨,我试图使用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>

7 回复 | 直到 8 年前

Dominic Barnes 16 年前

我假设您要将此行添加到 <tbody> 元素,并简单地使用 append() 上 <table> 将插入 <tr> 在外面 <TSBOR> 可能会产生不希望的结果。

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

Community Mohan Dere 8 年前

以下代码有效

<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> 把它插入第一个 <t车身> 在你的桌子上或者把它包装成一个新的 <TSBOR> 如果一个不存在。

David Clarke 10 年前

也许这就是你想要的答案。它查找的最后一个实例 <tr /> 并在新行后追加:

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

Yusril Herlian Syah 9 年前

我总是使用下面的代码来提高可读性

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

rsilva4 16 年前

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

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

Paul T. Rawkeen Bartosz Zasada 9 年前

尝试:

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

而在 partial ,您应该有:

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

Muhammad Bilal 8 年前

测试和工作

作为表中的第一行添加

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

作为表中的最后一行添加

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