在jQuery中添加表格行

Posted 2023-03-05

技术标签:

【中文标题】在jQuery中添加表格行【英文标题】：Add table row in 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 连接。见：***.com/a/50365764/7186739 以防万一行太复杂，我所做的是，用所需的结构隐藏第一行，进行克隆并修改文本并在第一行之后插入，如果你从 ajax 获取数据，这样响应您的表将被创建，请记住将其克隆到循环之外，然后使用它来修改循环内的内容。 $("#mainTable tbody").append(row);行是修改后的克隆副本:) 【参考方案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>

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

【讨论】：

【参考方案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("<tr></tr>") 都不是好的建议。最佳和最快方式是使用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】：

如果你有另一个变量，你可以在 <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 + '" >'+
    '</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】：

如果您想在<tr> 第一个孩子之前添加row。

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

如果您想在<tr> 最后一个子元素之后添加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】：

如果你有一个<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>");

【讨论】：

【参考方案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() 方法中的任何一个）是否为 <tr> 并插入将其放入表中的第一个 <tbody> 中，或者如果不存在则将其包装到新的 <tbody> 中。

所以是的，您的示例代码是可以接受的，并且可以在 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>

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

【讨论】：

以上是关于在jQuery中添加表格行的主要内容，如果未能解决你的问题，请参考以下文章

使用jquery在表格行中添加数字[重复]

如何使用jQuery在表格中间添加行？

jquery在每行选择选项上动态添加行显示价格表格db

用于在 HTML 表格行之间添加行的 Jquery 语法

使用jquery动态添加表格的行之后，如何获取表格高度？

将表格单元格添加到现有表格行，jQuery