如何使用Jquery动态创建html表(tr和td标记)

Question

我有一个ajax调用。我正在根据后端调用的响应创建一个表。

我需要知道如何对我在下面创建的tr和td标签进行样式设置(例如，我想为tr和td标记添加填充(。

我找了几个地方，但没有找到一个有效的解决方案。有人能回应吗。

$.ajax({
type: "POST",
url: "http:www.test.com/availability" ,
headers: {
"Content-Type":"application/json",
"WM_CONSUMER.SOURCE_ID":"OMS"
},
data: nliBody,
success: function (result, status, xhr) {
var table = $("<table>");
table.append("<tr><td><b>Test Node </b></td><td><b>Total </b></td></tr>");
if(result["payload"].length!=0)
{
for (var i = 0;  i < result["payload"].length; i++) 
{
table.append("<tr><td>" + result["payload"][i]["Node"] + "</td><td>" +   result["payload"][i]["quantity"] + "</td></tr>");
}
$("#message").html(table);
}

Answer 1

要修改所有trs或tds项目，请使用选择器：

$("#table_id tr").css('padding','XX'); //style all tr inside the table
$("#table_id tr td").css('color','YY'); //edit all td inside tr (not the tr itself)

当然，要做到这一点，你必须在你的表中添加一个id，可以这样做：

var table = $("<table>", {id:'table_id'});

类似地，您可以使用选择器编辑表格。

另外，另一种可能是在创建时将它们设置为内联样式：

table.append("<tr style="padding: 12px 0px 5px 0px"><td style="padding: 12px 0px 5px 0px"><b>Test Node </b></td><td><b>Total </b></td></tr>");

最后，我可以建议使用css：

#table_id tr{
padding: w x y z;
}
#table_id tr td{
padding: w x y z;
}

Answer 2

我会尝试这样的东西：

function makeTable(data, header) {
/*
Input: 
1. data Matrix
2. header Array (Optional)
*/
if (header == undefined) {
header = false;
}
var tbl = $("<table>");
if (header != false) {
$("<thead>").appendTo(tbl);
$("<tr>", {
class: "header-row"
}).appendTo($("thead", tbl));
$.each(header, function(i, e) {
$("<td>").html(e).appendTo($("thead > tr", tbl));
});
}
$("<tbody>").appendTo(tbl);
$.each(data, function(j, row) {
var r = $("<tr>",{
class: "body-row"
}).appendTo($("tbody", tbl));
$.each(row, function(i, cell) {
$("<td>", {
class: "cell"
}).html(cell).appendTo(r);
});
});
return tbl;
}
$.ajax({
type: "POST",
url: "http:www.test.com/availability",
headers: {
"Content-Type": "application/json",
"WM_CONSUMER.SOURCE_ID": "OMS"
},
data: nliBody,
success: function(result, status, xhr) {
var table = makeTable(result.payload, ["Test Node", "Test"]);
$("#message").html(table);
}
});

然后您可以使用CSS对它们进行样式设置。

.body-row {
padding: 3px;
}
.body-row .cell {
padding-right: 3px;
}