在jQuery中添加表格行

2424

jQuery在表中添加最后一行作为最后一行的最佳方法是什么？

这可以接受吗？

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

您可以向这样的表添加什么内容（例如输入，选择，行数）是否有限制？

javascript  jquery  html-table 
— 达里尔·海因（Darryl Hein）
source
2
Thxs灰。我也只是在学习jQuery，发现很难找出最好的方法，尤其是简单的东西。之所以将它们作为2个问题，是因为我发布了一个问题，然后差不多一个小时后，我意识到我应该把另一个问题放进去，并且认为我不应该更改第一个问题。
— Darryl Hein
30
— q=jquery+add+table+
17
仅供参考-避免使用多个附加项（极大地降低性能），而是建立字符串或使用速度更快的JavaScript连接。
— Gerrit Brink
— 超级模型
万一如果行太复杂，我要做的是，用所需的结构隐藏第一行，进行克隆并修改文本，然后在第一行之后插入，这样，如果您从ajax响应中获取数据，则会创建表，请记住在循环外克隆它，然后用它在循环内修改内容。$（“＃mainTable tbody”）。append（row）; row是修改后的副本：)
— Aadam，

Answers:

2143

您建议的方法并不能保证能为您提供所需的结果- 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，就可以在方法中包括任何内容，包括上面示例中的多行。

更新：最近对此问题进行了活动之后，重新访问此答案。双眼失明很好地说明tbody了DOM中总会有一个。这是正确的，但前提是至少有一行。如果没有行，tbody除非您自己指定一个行，否则将没有行。

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

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

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

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
— 卢克·贝内特
source
6
@Rama，不，不会。需要有一个更好的解决方案。
— 布莱恩·梁
40
在DOM中总会有一个肢体。
— 失明
4
空的
— 肢体
40
对原本不错的解决方案的一个小改进将是优化选择器。您可以使用$('#myTable').find('tbody:last')代替来提高速度$('#myTable > tbody:last')。
— 2012年
2
“双眼失明很好地说明了DOM中总会有一个躯干” –我只是在没有躯干的情况下尝试过，但它没有用-仅在有躯干的情况下才起作用。
— BrainSlugs83 2013年
771

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

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

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

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

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

— 尼尔
source
60
对于那些尝试这样做的人，请仔细注意括号的位置。正确的嵌套至关重要。
— 瑞安·伦迪
9
结束标签呢？他们没有必要吗？
— senfo 2011年
9
$（“＃tableClassname”）实际上不是$（“＃tableID”），因为哈希符号是指ID，而不是类名？
— 戴夫
7
我讨厌这样怪异的连锁。保持代码充满这些东西是一场噩梦。
— bancer
4
@senfo添加子元素将自动创建这些元素。
— Michel de Ruiter 2013年
308

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

jQuery的自1.4版本（？）会自动检测，如果你想插入（使用任何元素append()，prepend()，before()，或after()方法）是一个<tr>，并将其插入到第一个<tbody>在你的表或它包装成一个新的<tbody>，如果一个不存在。

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

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
— 萨尔曼·冯·阿巴斯
source
2
对此假设要小心。如果您附加的标记以\ n或\ n \ r开头，则jQuery不会检测到它是<tr>并将其附加到<table>而不是<tbody>。我刚刚遇到了MVC视图生成的标记，该标记在开始时有多余的一行。
— 米克
@Mik感谢您的注意！我想yourString.trim()可以解决这个问题。
— Salman von Abbas
当然可以，但是您必须考虑一下。如果知道有一个，最好养成追加到<tbody>的习惯。
— Mik
jQuery 3.1仍然需要指定一个body。在这里查看：jsfiddle.net/umaj5zz9/2
— user984003
这会使我的页面刷新。我该如何预防？
— 阿维（Avi）
168

如果您有a <tbody>和a <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>");
— 乍得
source
10
您的脚踩不正确。它应该出现在tbody之前，而不是之后-请参阅w3.org/TR/html4/struct/tables.html#h-11.2.3。因此，除非您选择违反标准，否则我的解决方案仍然有效（在这种情况下，您还可以期望其他事情也会出错）。无论您是否有肢体，我的解决方案都可以使用，但是如果没有肢体，您的建议将失败。
— 路加·本尼特
6
尽管<tfoot />中有任何错误，这是一个更好的解决方案。如果没有<tbody />，则可以对<table />本身使用相同的技术。鉴于“接受的答案”需要进行额外的检查，以查看是否存在现有行。（我知道操作人员没有指定此要求，但没关系-这篇文章在Google搜索此技术的文章中排名第一，而最佳答案不是最高。）
— CleverPatrick
5
这是比找到更好的解决方案。在多次迭代中，此技术似乎总是有效。作为添加的FYI，可以使用.prepend将行添加到表的开头，而.append将行放在表的末尾。
— Lance Cleveland
这是不正确的，它将在tbody中的每一行后附加一行
— garg10may
@ garg10may您能建议如何吗？它针对的是肢体，而不是任何子元素。
— 乍得
64

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

tableObject.insertRow(index)

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

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

如果省略此参数，则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>

希望对您有所帮助。

— sh
source
2
这种方法的问题（正如我刚刚发现的）是，如果有页脚，则会在页脚之后添加-1作为索引。
— kdubs 2012年
35

我建议

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

相对于 

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

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

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>
— 馆长
source
32

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

//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'
}));

这是演示 小提琴

— s
source
如果您有多个tbody插件，可以使用多个插件
— Mark Schultheiss
是的，您可以:)您可以尝试$("SELECTOR").last()限制标签的收集
— 强烈要求
23

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

$("#tableId").last().append("<tr><td>New row</td></tr>");
— 尼沙尔
source
9
好主意，但我想您想将选择器更改为#tableId tr，因为现在您将获得表，并在表下方添加行。
— Darryl Hein 2010年
17

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

style.css：

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

xxx.html

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

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

...
— 多米尼克
source
谢谢。这是非常优雅的解决方案。我喜欢它如何将模板保持在网格内。它使代码变得更加简单，易于阅读和维护。再次感谢。
— 罗德尼2015年
14

对于此处发布的最佳解决方案，如果最后一行上有嵌套表，则将新行添加到嵌套表中，而不是主表中。快速解决方案（考虑带/不带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>');
— 奥斯亚
source
14

我这样解决了。

使用jQuery

$('#tab').append($('<tr>')
    .append($('<td>').append("text1"))
    .append($('<td>').append("text2"))
    .append($('<td>').append("text3"))
    .append($('<td>').append("text4"))
  )

片段

$('#tab').append($('<tr>')
  .append($('<td>').append("text1"))
  .append($('<td>').append("text2"))
  .append($('<td>').append("text3"))
  .append($('<td>').append("text4"))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="tab">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td>New York</td>
  </tr>
</table>
展开摘要

— 安东vBR
source
我现在可以成功地将动态数据添加到新行中，但是使用此方法后，我的自定义过滤器无法正常工作..您对此有任何解决方案吗？谢谢
— Arjun
我认为您需要调用某种更新功能。哈德不加说明地讲。
— 安东vBR
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);
— 阿夫隆·奥尔谢夫斯基（Avron Olshewsky）
source
我认为这应该是一个新问题，而不是对现有问题的答案...
— Darryl Hein
11

您可以使用此出色的jQuery添加表行功能。它适用于具有<tbody>和不具有表的表。此外，它还考虑了最后一个表格行的colspan。

这是一个示例用法：

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));
— 乌兹别克
source
我看不到这非常有用。它所做的只是向表中添加一个空表行。通常，如果不总是这样，您想添加一个包含一些数据的新表行。
— Darryl Hein
1
但这通常就是您想要的。此功能使您可以将空行添加到任何表中，而不管您具有多少列和行跨度，从而使其成为UNIVERSAL函数。您可以使用$（'。tbl tr：last td'）从那里进行。关键是要具有通用功能！！！
— 乌兹别克
如果您的函数还将数据添加到新行中，则您下次将无法在下一个项目中使用它。有什么意义？！不过我认为，您不需要共享它
— 乌兹别克斯坦2009年
如果您提出的功能不是通用软件包的一部分，请在此处输入完整的功能代码。谢谢。
— Yevgeniy Afanasyev
10

我的解决方案：

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

用法：

$('#Table').addNewRow(id1);
— 里奇G
source
那如果tbody表中没有呢？意味着<table>即使没有任何标题，也可以在元素内部直接存在行。
— shashwat 2012年
我强烈建议您使用<TBody>标记，使其符合HTML 5标准，否则，您可以随时执行$（this）.append（'<tr id =“'+ rowId +'”> </ tr>'）; 只是在表格中追加一行。
— 瑞奇（Ricky G）
我认为，如果要将此功能设为函数，则可以为新行返回一个jQuery对象，以便它可链接。
— 2013年
10 
    // 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);
— 潘卡·加格（Pankaj Garg）
source
虽然这可能是一个答案，但是以后对访问者来说不是很有用...请在答案周围添加一些说明。
— Jayan 2015年
9

尼尔的答案是迄今为止最好的答案。但是事情很快就会变得混乱。我的建议是使用变量存储元素，并将其附加到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);
— 加布里埃尔·大城
source
9 
<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

用javascript函数编写

document.getElementById("myTable").insertRow(-1).innerHTML = '<tr>...</tr><tr>...</tr>';
— 杰基尔·侯赛因（Jakir Hossain）
source
7

这是一些hacketi hack代码。我想在HTML页面中维护行模板。表行0 ... n在请求时呈现，并且此示例具有一个硬编码行和一个简化的模板行。模板表是隐藏的，并且行标记必须在有效表中，否则浏览器可能会将其从DOM树中删除。添加一行使用counter + 1标识符，并且当前值保留在data属性中。它保证每一行都获得唯一的URL参数。

我已经在Internet Explorer 8，Internet Explorer 9，Firefox，Chrome，Opera，诺基亚Lumia 800，诺基亚C7（与Symbian 3），Android股票和Firefox beta浏览器上运行过测试。

<table id="properties">
<tbody>
  <tr>
    <th>Name</th>
    <th>Value</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td nowrap>key1</td>
    <td><input type="text" name="property_key1" value="value1" size="70"/></td>
    <td class="data_item_options">
       <a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a>
    </td>
  </tr>
</tbody>
</table>

<table id="properties_rowtemplate" style="display:none" data-counter="0">
<tr>
 <td><input type="text" name="newproperty_name_\${counter}" value="" size="35"/></td>
 <td><input type="text" name="newproperty_value_\${counter}" value="" size="70"/></td>
 <td><a class="buttonicon" href="javascript:deleteRow()" title="Delete row" onClick="deleteRow(this); return false;"></a></td>
</tr>
</table>
<a class="action" href="javascript:addRow()" onclick="addRow('properties'); return false" title="Add new row">Add row</a><br/>
<br/>

- - - - 
// add row to html table, read html from row template
function addRow(sTableId) {
    // find destination and template tables, find first <tr>
    // in template. Wrap inner html around <tr> tags.
    // Keep track of counter to give unique field names.
    var table  = $("#"+sTableId);
    var template = $("#"+sTableId+"_rowtemplate");
    var htmlCode = "<tr>"+template.find("tr:first").html()+"</tr>";
    var id = parseInt(template.data("counter"),10)+1;
    template.data("counter", id);
    htmlCode = htmlCode.replace(/\${counter}/g, id);
    table.find("tbody:last").append(htmlCode);
}

// delete <TR> row, childElem is any element inside row
function deleteRow(childElem) {
    var row = $(childElem).closest("tr"); // find <tr> parent
    row.remove();
}

PS：我将所有功劳归功于jQuery团队；他们应得的一切。没有jQuery的JavaScript编程-我什至不想考虑那个噩梦。

— 霍姆
source
7 
<tr id="tablerow"></tr>

$('#tablerow').append('<tr>...</tr><tr>...</tr>');
— Vivek S
source
7

我猜我已经在我的项目中完成过，这里是：

html

<div class="container">
    <div class = "row">
    <div class = "span9">
        <div class = "well">
          <%= form_for (@replication) do |f| %>
    <table>
    <tr>
      <td>
          <%= f.label :SR_NO %>
      </td>
      <td>
          <%= f.text_field :sr_no , :id => "txt_RegionName" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Particular %>
      </td>
      <td>
        <%= f.text_area :particular , :id => "txt_Region" %>
      </td>
    </tr>
    <tr>
      <td>
        <%= f.label :Unit %>
      </td>
      <td>
        <%= f.text_field :unit ,:id => "txt_Regio" %>
      </td>
      </tr>
      <tr>

      <td> 
        <%= f.label :Required_Quantity %>
      </td>
      <td>
        <%= f.text_field :quantity ,:id => "txt_Regi" %>
      </td>
    </tr>
    <tr>
    <td></td>
    <td>
    <table>
    <tr><td>
    <input type="button"  name="add" id="btn_AddToList" value="add" class="btn btn-primary" />
    </td><td><input type="button"  name="Done" id="btn_AddToList1" value="Done" class="btn btn-success" />
    </td></tr>
    </table>
    </td>
    </tr>
    </table>
    <% end %>
    <table id="lst_Regions" style="width: 500px;" border= "2" class="table table-striped table-bordered table-condensed">
    <tr>
    <td>SR_NO</td>
    <td>Item Name</td>
    <td>Particular</td>
    <td>Cost</td>
    </tr>
    </table>
    <input type="button" id= "submit" value="Submit Repication"  class="btn btn-success" />
    </div>
    </div>
    </div>
</div>

js

$(document).ready(function() {     
    $('#submit').prop('disabled', true);
    $('#btn_AddToList').click(function () {
     $('#submit').prop('disabled', true);
    var val = $('#txt_RegionName').val();
    var val2 = $('#txt_Region').val();
    var val3 = $('#txt_Regio').val();
    var val4 = $('#txt_Regi').val();
    $('#lst_Regions').append('<tr><td>' + val + '</td>' + '<td>' + val2 + '</td>' + '<td>' + val3 + '</td>' + '<td>' + val4 + '</td></tr>');
    $('#txt_RegionName').val('').focus();
    $('#txt_Region').val('');
        $('#txt_Regio').val('');
        $('#txt_Regi').val('');
    $('#btn_AddToList1').click(function () {
         $('#submit').prop('disabled', false).addclass('btn btn-warning');
    });
      });
});
— 斯内·潘迪亚
source
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);
— MEAbid
source
6

由于我也有一种方法也可以在最后或任何特定的地方添加行，所以我认为我也应该分享：

首先找出长度或行数：

var r=$("#content_table").length;

然后使用以下代码添加行：

$("#table_id").eq(r-1).after(row_html);
— 杰德07
source
6

要在该主题上添加一个很好的示例，如果您需要在特定位置添加一行，则这里是可行的解决方案。

多余的行将添加到第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>
— 雷夫
source
6 
<table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

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

var footer = $("#mytable tfoot")
footer.before("<tr><td></td></tr>")
— 帕维尔·史克利尼克（Pavel Shkleinik）
source
5 
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

将添加一个新行到第一 TBODY表中的，而不取决于任何THEAD或TFOOT存在。（我没有从.append()存在此行为的jQuery版本中找到信息。）

您可以在以下示例中尝试：

<table class="t"> <!-- table with THEAD, TBODY and TFOOT -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t"> <!-- table with two TBODYs -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
<tbody>
  <tr><td>1</td><td>2</td></tr>
</tbody>
<tbody>
  <tr><td>3</td><td>4</td></tr>
</tbody>
<tfoot>
  <tr><th>f1</th><th>f2</th></tr>
</tfoot>
</table><br>

<table class="t">  <!-- table without TBODY -->
<thead>
  <tr><th>h1</th><th>h2</th></tr>
</thead>
</table><br>

<table class="t">  <!-- table with TR not in TBODY  -->
  <tr><td>1</td><td>2</td></tr>
</table>
<br>
<table class="t">
</table>

<script>
$('.t').append('<tr><td>a</td><td>a</td></tr>');
</script>

在哪个示例a b行中插入1 2，而不是3 4在第二个示例之后。如果表为空，则jQuery将创建TBODY一个新行。

— 阿列克谢·帕夫洛夫（Alexey Pavlov）
source
5

如果您使用的是Datatable JQuery插件，则可以尝试。

oTable = $('#tblStateFeesSetup').dataTable({
            "bScrollCollapse": true,
            "bJQueryUI": true,
            ...
            ...
            //Custom Initializations.
            });

//Data Row Template of the table.
var dataRowTemplate = {};
dataRowTemplate.InvoiceID = '';
dataRowTemplate.InvoiceDate = '';
dataRowTemplate.IsOverRide = false;
dataRowTemplate.AmountOfInvoice = '';
dataRowTemplate.DateReceived = '';
dataRowTemplate.AmountReceived = '';
dataRowTemplate.CheckNumber = '';

//Add dataRow to the table.
oTable.fnAddData(dataRowTemplate);

引用数据表fnAddData 数据表API

— 普拉韦纳M
source
5

用简单的方法：

$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
— 索普拉提亚
source
您能否详细说明您的答案，并提供有关您提供的解决方案的更多说明？
— abarisone 2015年
4

试试这个：非常简单的方法

$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
  </tbody>
</table>
展开摘要

— 拉伊莫比亚普
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.