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

我是这样做的:

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

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


当前回答

<tr id="tablerow"></tr>

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

其他回答

这是我的解决方案

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

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

我是这样解决的。

使用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的“last()”函数轻松完成。

$("#tableId").last().append("<tr><td>New row</td></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'
}));

这里是演示不停摆弄