在jQuery中添加表格行

【问题标题】：Add table row in jQuery在jQuery中添加表格行
【发布时间】：2010-09-15 07:44:06
【问题描述】：

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

这可以接受吗？

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

您可以添加到这样的表中是否有限制（例如输入、选择、行数）？

【问题讨论】：

  • 谢谢灰。我也只是在学习 jQuery，发现很难找到最好的方法，尤其是简单的事情。它们是 2 个问题的原因是因为我发布了一个问题，然后差不多一个小时后，我意识到我应该把另一个问题放进去，并且认为我不应该更改第一个问题。
  • 因此：google.com/search?q=jquery+add+table+row
  • 仅供参考 - 避免使用多个附加（极大地降低性能），而是建立你的字符串或使用更快的 JavaScript 连接。
  • 见：stackoverflow.com/a/50365764/7186739
  • 以防万一行太复杂，我所做的是，用所需的结构隐藏第一行，进行克隆并修改文本并在第一行之后插入，如果你从 ajax 获取数据，这样响应您的表将被创建，请记住将其克隆到循环之外，然后使用它来修改循环内的内容。 $("#mainTable tbody").append(row);行是修改后的克隆副本:)

标签： javascript jquery html-table


【解决方案1】：

)达里尔：

您可以使用 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');
});

【讨论】：

    【解决方案2】：

    我知道您要求使用 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>

    希望对你有帮助。

    【讨论】：

      【解决方案3】：

      我尝试了最受好评的一个，但它对我不起作用，但下面的效果很好。

      $('#mytable tr').last().after('<tr><td></td></tr>');

      即使那里有托比也可以。

      【讨论】：

        【解决方案4】：

        在你的情况下，纯 JS 很短

        myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>'


        function add() {
  myTable.firstChild.innerHTML+=`<tr><td>date</td><td>${+new Date}</td></tr>`
}
        td {border: 1px solid black;}
        <button onclick="add()">Add</button><br>
<table id="myTable"><tbody></tbody> </table>

        （如果我们删除 &lt;tbody&gt; 和 firstChild 它也可以工作，但用 &lt;tbody&gt; 包裹每一行）

        【讨论】：

          【解决方案5】：

          在这里，您只需单击按钮即可获得输出。当您单击添加行按钮时，又添加了一行。

          希望对你有帮助。

          <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>

          【讨论】：

            【解决方案6】：

            要在当前行的最后一行添加新行，可以这样使用

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

            您可以如上所述追加多行。你也可以像这样添加内部数据

            $('#yourtableid tr:last').after('<tr><td>your data</td></tr>');

            用另一种方式你可以这样做

            let table = document.getElementById("tableId");

let row = table.insertRow(1); // pass position where you want to add a new row


//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);


//add value to added td cell
 cell0.innerHTML = "your td content here";
 cell1.innerHTML = "your td content here";
 cell2.innerHTML = "your td content here";
 cell3.innerHTML = "your td content here";

            【讨论】：

              【解决方案7】：

              上面的答案非常有帮助，但是当学生参考此链接从表单中添加数据时，他们通常需要一个样本。

              我想提供一个示例，从 from 获取输入并使用 .after() 使用字符串 interpolation 将 tr 插入到表中。

              function add(){
  let studentname = $("input[name='studentname']").val();
  let studentmark = $("input[name='studentmark']").val();

  $('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}


              function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();

$('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`);
}
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<input type='text' name='studentname' />
<input type='text' name='studentmark' />
<input type='button' onclick="add()" value="Add new" />
</form>
<table id='student'>
  <thead>
    <th>Name</th>
    <th>Mark</th>
  </thead>
</table>
</body>
</html>

              【讨论】：

                【解决方案8】：

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

                $('&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;').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>

                【讨论】：

                  【解决方案9】：

                  使用 JQuery 添加表行：

                  如果你想在表格的最后一行子之后添加行，你可以试试这个

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

                  如果你想添加行表的第一个行子，你可以试试这个

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

                  【讨论】：

                    【解决方案10】：

                    我是这样解决的。

                    使用 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>

                    【讨论】：

                    • 我现在可以在新行中成功添加动态数据，但是使用此方法后，我的自定义过滤器不起作用..您有什么解决方案吗？谢谢
                    • 我认为您需要调用某种更新函数。不得不说没有例子。
                    【解决方案11】：

                    提示： 通过innerHTML or .html() 在html table 中插入行在某些浏览器中无效（类似IE9），并且在任何浏览器中使用.append("&lt;tr&gt;&lt;/tr&gt;") 都不是好的建议。 最佳和最快方式是使用pure javascript代码。

                    若要以这种方式与jQuery 结合，只需添加与jQuery 类似的新插件：

                    $.fn.addRow=function(index/*-1: add to end  or  any desired index*/, cellsCount/*optional*/){
    if(this[0].tagName.toLowerCase()!="table") return null;
    var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
    for(;i<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc
    return $(r);
};

                    现在在整个项目中使用它，类似这样：

                    var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);

                    【讨论】：

                      【解决方案12】：

                      如果你有另一个变量，你可以在 &lt;td&gt; 标签中访问，就像这样尝试。

                      这种方式希望对你有帮助

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

                      【讨论】：

                        【解决方案13】：

                        这是我的解决方案

                        $('#myTable').append('<tr><td>'+data+'</td><td>'+other data+'</td>...</tr>');

                        【讨论】：

                          【解决方案14】：

                          也可以这样做：

                          $("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>")

                          【讨论】：

                          • 这对于浏览器/JS 来说似乎相当复杂，甚至可能更慢，因为它需要解析更多的 HTML。
                          【解决方案15】：

                          如果您想在&lt;tr&gt; 第一个孩子之前添加row。

                          $("#myTable > tbody").prepend("<tr><td>my data</td><td>more data</td></tr>");

                          如果您想在&lt;tr&gt; 最后一个子元素之后添加row。

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

                          【讨论】：

                            【解决方案16】：

                            我发现这个AddRow plugin 对于管理表行非常有用。不过，如果您只需要添加新行，Luke 的 solution 将是最合适的。

                            【讨论】：

                              【解决方案17】： 
                              <table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

                              使用 javascript 函数编写

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

                              【讨论】：

                                【解决方案18】：

                                如果你有一个&lt;tbody&gt; 和一个&lt;tfoot&gt; 会怎样？

                                如：

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

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

                                因此，最好的解决方案是包含&lt;tbody&gt; 标签并使用.append，而不是.after。

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

                                【讨论】：

                                  【解决方案19】： 
                                      // 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);

                                  【讨论】：

                                  • 虽然这可能是一个答案，但对以后的访问者来说并不是很有用...请在您的答案周围添加一些解释。
                                  【解决方案20】：

                                  在我看来，最快最清晰的方法是

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

                                  这里是演示Fiddle

                                  我还可以推荐一个小函数来进行更多的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'
}));

                                  这里是演示 Fiddle

                                  【讨论】：

                                  • 如果你有多个tbody，你可以获得多个插入
                                  • 是的，你可以 :) 你可以尝试$("SELECTOR").last() 来限制你的标签集合
                                  【解决方案21】：

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

                                  【讨论】：

                                    【解决方案22】：

                                    自从@Luke Bennett 回答了这个问题后，情况就发生了变化。这是更新。

                                    jQuery 从 1.4(?) 版本开始自动检测您尝试插入的元素（使用 append()、prepend()、before() 或 after() 方法中的任何一个）是否为 &lt;tr&gt; 并插入将其放入表中的第一个 &lt;tbody&gt; 中，或者如果不存在则将其包装到新的 &lt;tbody&gt; 中。

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

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

                                    【讨论】：

                                      【解决方案23】：

                                      简单来说：

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

                                      【讨论】：

                                      • 能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？
                                      【解决方案24】：

                                      您建议的方法不能保证给您所需的结果 - 例如，如果您有 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，包括上面示例中的多行。

                                      更新：在最近有此问题的活动后重新访问此答案。 eyelidlessness 很好地评论了 DOM 中总会有一个tbody；这是真的，但前提是至少有一行。如果您没有行，则不会有tbody，除非您自己指定了一个。

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

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

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

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

                                      【讨论】：

                                        【解决方案25】： 
                                        <table id=myTable>
    <tr><td></td></tr>
    <style="height=0px;" tfoot></tfoot>
</table>

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

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

                                        【讨论】：

                                          【解决方案26】：

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

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

                                          【讨论】：

                                            【解决方案27】：

                                            Neil's answer 是迄今为止最好的。然而事情变得非常快。我的建议是使用变量来存储元素并将它们附加到 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);

                                            【讨论】：

                                              【解决方案28】： 
                                              <tr id="tablerow"></tr>

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

                                              【讨论】：

                                                【解决方案29】：

                                                如果你使用的是 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 Datatables API

                                                【讨论】：

                                                  【解决方案30】：

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

                                                  在第 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>

                                                  【讨论】：

                                                    猜你喜欢
                                                    • 1970-01-01
                                                    • 1970-01-01
                                                    • 2011-02-03
                                                    • 2012-05-19
                                                    • 2023-04-11
                                                    • 1970-01-01
                                                    • 2011-12-14
                                                    • 2015-06-27
                                                    相关资源
                                                    最近更新 更多
                                                    热门标签
                                                    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode