Question

您好我正在尝试使用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>

Answer 1

我假设您要将此行添加到<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>

Answer 2

以下代码可以使用

<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>中（如果不存在）。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

尝试：

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

在partial中，您应该：

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

Answer 7

经测试＆amp;工作

添加为表格中的第一行

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

添加为表格中的最后一行

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

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

7 个答案: