如何使用jQuery向表格中添加行？

Question

如何使用jQuery向表格中添加行？

60

大家好，我试图使用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>

- Amit

请参阅此链接：https://dev59.com/enI95IYBdhLWcg3wxA8-#50365764 - Billu

7个回答

23

下面的代码可以工作

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

请注意，即使表格包括 <tbody> 元素，从jQuery 1.4开始，以下代码仍然有效：

自 jQuery 1.4 版本以来，无论您使用的是 append()、prepend()、before() 或 after() 方法，jQuery 都会自动检测要插入的元素是否为 <tr>，并将其插入到表格中的第一个 <tbody> 中，如果不存在，则包装成一个新的 <tbody>。

- Amit

var value1 = 1; $('#myTable').append('<tr><td>' + value1+'</td></tr>')。 - Amit

11

我经常使用下面的代码来提高可读性

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

- Yusril Herlian Syah

9

也许这就是你正在寻找的答案。它会查找最后一个<tr />实例，并在其后添加新行。

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

- Naveen Kumar

4

你应该添加到表格而不是行。

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

- rsilva4

好的，你在做其他错误，请检查这里（http://secretgeek.net/rtjqe/realtimejqueryeditor.htm）你自己的代码和我的解决方案或多米尼克的解决方案，你会发现它可以工作。 - rsilva4

2

在表格中添加第一行或最后一行

要添加为表格的第一行：

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

在表格中添加最后一行。

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

- Billu

2

尝试：

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

而在 partial 中，你需要有：

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

- Punit Rathore

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dominic Barnes · Accepted Answer

我假设您想将此行添加到<tbody>元素中，仅使用append()在<table>上将插入<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>