在jQuery中添加表行

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

我是这样做的：

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

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

当前回答

你建议的方法并不一定能给你带来你想要的结果——例如，如果你有一个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

其他回答

我知道您要求使用jQuery方法。我看了很多，发现我们可以通过下面的函数以比直接使用JavaScript更好的方式来实现。

tableObject.insertRow(index)

index是一个整数，指定要插入的行的位置（从0开始）。也可以使用-1的值；这导致新行将被插入最后的位置。

此参数在Firefox和Opera中是必需的，但在Internet Explorer、Chrome和Safari中是可选的。

如果省略此参数，insertRow（）将在Internet Explorer中的最后一个位置以及Chrome和Safari中的第一个位置插入新行。

它将适用于HTML表的所有可接受结构。

以下示例将在last中插入一行（-1用作索引）：

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

我希望这有帮助。

2012-04-20 17:38:43

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

style.css：

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

xxx.html

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

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

...

2010-12-16 05:30:14

<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');

2013-12-21 11:54:45

<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

您可以缓存页脚变量并减少对DOM的访问（注意：使用假行而不是页脚可能会更好）。

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")

2012-04-13 10:47:12

为了在这个主题上添加一个好例子，如果您需要在特定位置添加一行，这里有一个有效的解决方案。

额外的行添加在第5行之后，如果少于5行，则添加在表的末尾。

var ninja_row = $('#banner_holder').find('tr');

if( $('#my_table tbody tr').length > 5){
    $('#my_table tbody tr').filter(':nth-child(5)').after(ninja_row);
}else{
    $('#my_table tr:last').after(ninja_row);
}

我把内容放在桌子下面一个现成的（隐藏的）容器上。。因此，如果您（或设计师）必须更改，则无需编辑JS。

<table id="banner_holder" style="display:none;"> 
    <tr>
        <td colspan="3">
            <div class="wide-banner"></div>
        </td>   
    </tr> 
</table>

2013-08-29 11:35:58

在jQuery中添加表行

推荐文章

最新文章

标签