html-如何使用jQuery向表中添加行?

嗨,我试图使用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 asked 2020-01-13T20:04:37Z
7个解决方案
52 votes

我假设您要将这一行添加到<tbody>元素中,并且仅在$(document).ready(function(){});上使用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>
Dominic Barnes answered 2020-01-13T20:05:00Z
23 votes

以下代码有效

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

请注意,即使表格包含<tr>元素,此功能也将从jQuery 1.4开始运行:

自版本1.4(?)起的jQuery自动检测您尝试插入的元素(使用append(),prepend(),before()或after()方法)是否为<tr>,并将其插入前<tbody> 在您的表格中,或者将其包装到新的<tbody>(如果不存在)中。

Amit answered 2020-01-13T20:05:29Z
9 votes

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

<script type="text/javascript">
    $('a').click(function() {
        $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>');
    });
</script>
Naveen Kumar answered 2020-01-13T20:05:49Z
8 votes

我总是在下面使用此代码以提高可读性

$('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 answered 2020-01-13T20:06:14Z
3 votes

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

<script type="text/javascript">
$('a').click(function() {
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>');
});
</script>
rsilva4 answered 2020-01-13T20:06:33Z
2 votes

尝试:

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

partial中,您应该具有:

<td>row1</td>
<td>row2</td>
Punit Rathore answered 2020-01-13T20:06:57Z
0 votes

经过测试和工作

要添加为表中的第一行

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

要添加为表中的最后一行

$(".table tbody").prepend("<tr><td>New row</td></tr>");
Super Model answered 2020-01-13T20:07:26Z
translate from https://stackoverflow.com:/questions/2160890/how-do-you-append-rows-to-a-table-using-jquery