在 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>');

只要它是有效的 HTML,就可以在after()方法中包括任何内容,包括上面示例中的多行。

更新:最近对此问题进行了活动之后,重新访问此答案。 eyelidlessness 使一个很好的评价是,将永远是一个tbody在 DOM; 这是正确的,但前提是至少有一行。如果没有行,除非您自己指定一个,否则不会有任何tbody

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

权衡一切,我不确定是否有一个单一的解决方案可以解决每种可能的情况。您将需要确保 jQuery 代码符合您的标记。

我认为最安全的解决方案可能是确保您的table在标记table始终至少包含一个tbody ,即使它没有行也是如此。在此基础上,您可以使用以下代码,无论您拥有多少行(并且也考虑了多个tbody元素),它们都将起作用:

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

jQuery 有一个内置的工具可以即时操作 DOM 元素。

您可以像这样将任何东西添加到表中:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

jQuery 中的$('<some-tag>')东西是一个标签对象,可以具有几个可以设置和获取的attr属性,以及text ,它表示此处<tag>text</tag>之间的文本: <tag>text</tag>

这是一个非常奇怪的缩进,但是您可以更轻松地了解此示例中发生的情况。

因此,自@Luke Bennett回答此问题以来,情况已经发生了变化。这是更新。

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

所以是的,您的示例代码是可以接受的,并且可以在 jQuery 1.4 + 上正常工作。 ;)

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

如果您有<tbody><tfoot>怎么办?

如:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

然后,它将在行脚中插入新行 - 而不是正文。

因此,最好的解决方案是包括一个<tbody>标记并使用.append而不是.after

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

我知道您已要求使用 jQuery 方法。我看了很多东西,发现我们可以通过比下面的函数直接使用 JavaScript 更好的方式来做到这一点。

tableObject.insertRow(index)

index是一个整数,指定要插入的行的位置(从 0 开始)。也可以使用值 - 1。结果是新行将被插入到最后一个位置。

在 Firefox 和Opera 中 ,此参数是必需的,但在 Internet Explorer, ChromeSafari 中 ,此参数是可选的。

如果省略此参数,则insertRow()在 Internet Explorer 中的最后一个位置以及 Chrome 和 Safari 中的第一个位置插入一个新行。

它适用于 HTML 表格的每个可接受的结构。

以下示例将在最后插入一行(-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>

希望对您有所帮助。

我建议

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

相对于

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

firstlast关键字作用于要启动而不关闭的 first 或 last 标记。因此,如果您不希望更改嵌套表,而是将其添加到整个表中,则此方法对于嵌套表会更好。至少,这是我发现的。

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

我认为最快最明确的方法是

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

这是演示小提琴

我也可以推荐一个小的功能来进行更多的 HTML 更改

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

如果您使用我的弦乐作曲家,您可以像

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

这是演示小提琴

使用 jQuery 的 “last()” 函数可以轻松完成此操作。

$("#tableId").last().append("<tr><td>New row</td></tr>");

当表中没有任何行以及每行都非常复杂时,我将使用这种方式。

style.css:

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

xxx.html

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

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

...

对于此处发布的最佳解决方案,如果最后一行上有嵌套表,则将新行添加到嵌套表中,而不是主表中。快速解决方案(考虑带 / 不带 tbody 的表以及带嵌套表的表):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('<tbody />');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

用法示例:

add_new_row('#myTable','<tr><td>my new row</td></tr>');