我使用jQuery向表中添加一行作为最后一行。

我是这样做的:

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

您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?


当前回答

如果要在<tr>第一个子项之前添加行。

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

如果要在<tr>最后一个子项之后添加行。

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

其他回答

我建议

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

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

第一个和最后一个关键字作用于要启动的第一个或最后一个标记,而不是关闭。因此,如果您不希望更改嵌套表,而是将其添加到整个表中,则这在嵌套表中的效果更好。至少,这是我发现的。

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

由于我也有一种方法在最后或任何特定位置添加行,所以我认为我也应该分享这一点:

首先找出行的长度:

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

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

$("#table_id").eq(r-1).after(row_html);

我是这样解决的。

使用jquery

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

一小条

$('#tab').append($('<tr>')追加($('<td>')追加(“text1”))追加($('<td>')追加(“text2”))追加($('<td>')追加(“text3”))追加($('<td>')追加(“text4”)))<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><table id=“tab”><tr><th>名字</th><th>姓氏</th>年龄</th><th>城市</th></tr><tr><td>吉尔</td><td>史密斯</td><td>50个</td><td>纽约</td></tr></table>

您可以使用这个很棒的jQuery添加表行函数。它适用于有<tbody>但没有的表。它还考虑了最后一行表格的列跨度。

下面是一个示例用法:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

如果您正在使用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