我有一个表格,通过jQuery动态加载数据。如果我删除<thead>
和<tbody>
标签,代码可以正常工作。但是当我添加这些标签后,代码将无法工作;具体来说,行不会追加。行添加在一个列下面。
if(responseJson.length!=null){
$("#itemtable").find("tr:gt(0)").remove();
var table1 = $("#itemtable tbody");
var i = 1;
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['slno']);
rowNew.children().eq(1).text(value['itemname']);
rowNew.children().eq(2).text(value['itemcode']);
rowNew.children().eq(3).text(value['supplier']);
rowNew.children().eq(4).text(value['receivedqty']);
rowNew.children().eq(5).text(value['rejectedqty']);
rowNew.children().eq(6).text(value['acceptedqty']);
rowNew.children().eq(7).text(value['remarks']);
rowNew.appendTo(table1);
i++;
});
}
/* table-itemtable styles */
.t1 { border-collapse: collapse; width: 100%;}
.t1 th, td { text-align: left; padding: 8px;}
.t1 th {background-color: #4CAF50; color: white;}
.t1 tbody { display: block; }
.t1 tbody {
height: 300px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
<thead>
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
<th>Supplier</th>
<th>Received qty</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
tbody
,仅制作一个简单的示例,选择table tbody
就会失败。除非您最初添加了一些现有行。请尝试自己运行一个简单的演示。我认为你的问题是其他原因。尝试模拟一个简单的对象进行测试(不涉及 ajax 请求)。 - Hopeless