logo标签列表

在jQuery中添加表格行

javascriptjqueryhtml-table
2656
我使用jQuery将一行添加到表格的末尾。我是这样做的：
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

在这样的表格中，您可以添加的内容是否有限制（例如输入、选择、行数）？是否有其他方法来做到这一点？

4
谢谢，Ash。我也在学习jQuery，发现很难找出最好的方法，特别是对于简单的东西。这两个问题之所以分开提问，是因为我先发布了一个问题，大约一个小时后才意识到我应该再加上另一个问题，而且我觉得不应该更改第一个问题。 - Darryl Hein
33
由于这个原因：http://www.google.com/search?q=jquery+add+table+row - Darryl Hein
19
请注意避免使用多个 append 操作（会严重降低性能），相反，应该逐步构建字符串或使用 JavaScript 的 join 方法来提高速度。 - Gerrit Brink
1
请参考以下链接：https://dev59.com/enI95IYBdhLWcg3wxA8-#50365764 - Billu
2
如果行过于复杂，我会隐藏第一行并保留所需的结构，然后克隆并修改文本，并将其插入到第一行之后。这样，如果您从ajax响应中获取数据，则可以创建表格。请记住在循环外克隆它，然后在循环内使用它来修改内容。$("#mainTable tbody").append(row); row是修改后的克隆副本 :) - Aadam
42个回答
15

如果这里发布的最佳解决方案中有一个嵌套表格在最后一行，新行将添加到嵌套表格而不是主表格中。下面是一个快速解决方案（考虑包含/不包含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>');
13

我曾经遇到一些相关问题，试图在点击的行后插入一个表格行。所有都很好，除了对于最后一行，.after() 没有起作用。

$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);

我最终得到了一个非常零乱的解决方案：

按照以下方式创建表格（每行都有id）：

<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>

等等，然后：

$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
我认为这应该是一个新问题，而不是对现有问题的回答... - Darryl Hein
12
    // Create a row and append to table
    var row = $('<tr />', {})
        .appendTo("#table_id");

    // Add columns to the row. <td> properties can be given in the JSON
    $('<td />', {
        'text': 'column1'
    }).appendTo(row);

    $('<td />', {
        'text': 'column2',
        'style': 'min-width:100px;'
    }).appendTo(row);
虽然这可能是一个答案，但对于以后的访问者来说并不是非常有用... 请在您的答案周围添加一些解释。 - Jayan
12
你可以使用这个很棒的jQuery添加表格行函数。它可以很好地处理有<tbody>和没有<tbody>的表格，并且考虑了你最后一行表格的跨列情况。
下面是一个使用示例：
// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
我觉得这并不是特别有用的。它只是在表格中添加了一个空的行。通常情况下，您想要添加一个带有一些数据的新表格行。 - Darryl Hein
1
但这通常是你想要的。此函数可让您向任何表格添加空行，无论您有多少列和行跨度，从而使其成为通用函数。例如，您可以继续使用$('.tbl tr:last td')。整个重点在于拥有通用函数！ - Uzbekjon
如果你的函数还向新行中添加数据，那么下次在你的下一个项目中就不能再使用它了，这有什么意义？！ 尽管如此，在我看来，你不需要分享它... - Uzbekjon
如果您提出的函数不是常用包的一部分，请在此处放置完整的函数代码。谢谢。 - Yevgeniy Afanasyev
11

我的解决方案：

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append('<tr id="' + rowId + '"> </tr>');
};

用法：

$('#Table').addNewRow(id1);
那么如果表格中没有 tbody，又怎样呢？这意味着即使没有任何标题，也可以在 <table> 元素内直接放置行。 - shashwat
我强烈建议您使用<TBody>标记，以符合HTML 5标准，如果没有，那么您可以始终执行$(this).append('<tr id="' + rowId + '"> </tr>'); 这只是在表格中添加一行。 - Ricky Gummadi
我认为如果你要将这个变成一个函数，你可以返回一个 jQuery 对象来表示新行，这样就可以链式调用了。 - Kias
10

尼尔的答案迄今为止是最好的答案。然而，事情很快变得混乱起来。我的建议是使用变量来存储元素，并将它们附加到DOM层次结构中。

HTML

<table id="tableID">
    <tbody>
    </tbody>
</table>

JAVASCRIPT

// Reference to the table body
var body = $("#tableID").find('tbody');

// Create a new row element
var row = $('<tr>');

// Create a new column element
var column = $('<td>');

// Create a new image element
var image = $('<img>');
image.attr('src', 'img.png');
image.text('Image cell');

// Append the image to the column element
column.append(image);
// Append the column to the row element
row.append(column);
// Append the row to the table body
body.append(row);
9
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

使用JavaScript函数编写

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
9

我发现这个AddRow插件对于管理表格行非常有用。但是，如果您只需要添加新行，则Luke的解决方案最适合。

8
这是我的解决方案。
$('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');
7
如果您有另一个变量，您可以像这样在<td>标签中访问它。希望这种方式能够有所帮助。
var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '<tr>' +
    '<td>'+ text +'</td>'+
    '<td>'+ text +'</td>'+
    '<td>'+
      '<img src="' + image + '" alt="yourImage">'+
    '</td>'+
  '</tr>'
);

$('#yourTableId').append(tr);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接