我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
我使用jQuery向表中添加一行作为最后一行。
我是这样做的:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
您可以向这样的表中添加的内容(例如输入、选择、行数)是否有限制?有不同的方法吗?
当前回答
当表中没有任何行时,我使用这种方式,而且每一行都非常复杂。
style.css:
...
#templateRow {
display:none;
}
...
xxx.html
...
<tr id="templateRow"> ... </tr>
...
$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );
...
其他回答
)达里尔:
您可以使用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');
});
我遇到了一些相关的问题,试图在单击的行之后插入一个表行。除了.after()调用对最后一行不起作用之外,一切都很好。
$('#traffic tbody').find('tr.trafficBody).filter(':nth-child(' + (column + 1) + ')').after(insertedhtml);
我想出了一个非常不整洁的解决方案:
按如下方式创建表(每行的id):
<tr id="row1"> ... </tr>
<tr id="row2"> ... </tr>
<tr id="row3"> ... </tr>
等
然后:
$('#traffic tbody').find('tr.trafficBody' + idx).after(html);
简单来说:
$('#yourTableId').append('<tr><td>your data1</td><td>your data2</td><td>your data3</td></tr>');
要在当前行的最后一行添加新行,可以使用如下方法
$('#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";
我是这样解决的。
使用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>