在jQuery中添加表行

我使用jQuery向表中添加一行作为最后一行。

我是这样做的：

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

您可以向这样的表中添加的内容（例如输入、选择、行数）是否有限制？有不同的方法吗？

当前回答

我建议

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>');

与

$('#myTable > tbody:last').append('<tr>...</tr><tr>...</tr>');

第一个和最后一个关键字作用于要启动的第一个或最后一个标记，而不是关闭。因此，如果您不希望更改嵌套表，而是将其添加到整个表中，则这在嵌套表中的效果更好。至少，这是我发现的。

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

2010-10-22 21:34:25

其他回答

简单来说：

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');

2015-06-16 12:11:44

你建议的方法并不一定能给你带来你想要的结果——例如，如果你有一个tbody：

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

您将得到以下结果：

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

因此，我建议采用以下方法：

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

您可以在after（）方法中包含任何内容，只要它是有效的HTML，包括上面示例中的多行。

更新：在最近使用此问题进行活动后，重新审视此答案。无眼是一个很好的评论，即DOM中总会有一个tbody；这是正确的，但前提是至少有一行。如果没有行，除非您自己指定了一行，否则不会有tbody。

DaRKoN_建议在tbody之后添加内容，而不是在最后一个tr之后添加内容。这解决了没有行的问题，但仍然不可靠，因为理论上可以有多个tbody元素，行将添加到每个元素中。

权衡一切，我不确定是否有一个单一的单线解决方案能够解决每一种可能的情况。您需要确保jQuery代码与标记相符。

我认为最安全的解决方案可能是确保您的表始终在标记中包含至少一个tbody，即使它没有行。在此基础上，您可以使用以下方法，无论您有多少行（也可以考虑多个tbody元素）都可以使用：

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

2008-10-04 21:49:32

)达里尔：

您可以使用appendTo方法将其附加到tbody，如下所示：

$(() => {
   $("<tr><td>my data</td><td>more data</td></tr>").appendTo("tbody");
});

您可能希望使用最新的JQuery和ECMAScript。然后可以使用后端语言将数据添加到表中。也可以将其包装在变量中，如下所示：

$(() => {
  var t_data = $('<tr><td>my data</td><td>more data</td></tr>');
  t_data.appendTo('tbody');
});

2021-01-31 02:20:51

在这里，您只需单击按钮，即可获得输出。单击“添加行”按钮，然后添加一行。

我希望这很有帮助。

<html> 

<head> 
    <script src= 
            "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 

    <style> 
        table { 
            margin: 25px 0; 
            width: 200px; 
        } 

        table th, table td { 
            padding: 10px; 
            text-align: center; 
        } 

        table, th, td { 
            border: 1px solid; 
        } 
    </style> 
</head> 

<body> 

    <b>Add table row in jQuery</b> 

    <p> 
        Click on the button below to 
        add a row to the table 
    </p> 

    <button class="add-row"> 
        Add row 
    </button> 

    <table> 
        <thead> 
            <tr> 
                <th>Rows</th> 
            </tr> 
        </thead> 
        <tbody> 
            <tr> 
                <td>This is row 0</td> 
            </tr> 
        </tbody> 
    </table> 

    <!-- Script to add table row -->
    <script> 
        let rowno = 1; 
        $(document).ready(function () { 
            $(".add-row").click(function () { 
                rows = "<tr><td>This is row " 
                    + rowno + "</td></tr>"; 
                tableBody = $("table tbody"); 
                tableBody.append(rows); 
                rowno++; 
            }); 
        }); 
    </script> 
</body> 
</html>

2020-01-29 11:04:32

当表中没有任何行时，我使用这种方式，而且每一行都非常复杂。

style.css：

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

2010-12-16 05:30:14

在jQuery中添加表行

推荐文章

最新文章

标签