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

我是这样做的:

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

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


当前回答

使用JQuery添加tabe行:

如果要在表的最后一个子行之后添加行,可以尝试以下操作

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

如果要添加表的第1行子级,可以尝试以下操作

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

其他回答

你建议的方法并不一定能给你带来你想要的结果——例如,如果你有一个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,包括上面示例中的多行。

更新:在最近使用此问题进行活动后,重新审视此答案。无眼是一个很好的评论,即DOM中总会有一个tbody;这是正确的,但前提是至少有一行。如果没有行,除非您自己指定了一行,否则不会有tbody。

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

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

我认为最安全的解决方案可能是确保您的表始终在标记中包含至少一个tbody,即使它没有行。在此基础上,您可以使用以下方法,无论您有多少行(也可以考虑多个tbody元素)都可以使用:

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

在我看来,最快和明确的方法是

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

这里是演示不停摆弄

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

当表中没有任何行时,我使用这种方式,而且每一行都非常复杂。

style.css:

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

xxx.html

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

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

...

要在当前行的最后一行添加新行,可以使用如下方法

$('#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";