[英]How to style html table (tr and td tags) created dynamically with Jquery
I have an ajax call.我有一个 ajax 电话。 I am creating a table based off the response of the backend call.
我正在根据后端调用的响应创建一个表。
I need to know how i can style the tr and td tags (for eg i want to add padding to tr and td tags) which i created below.我需要知道如何设置我在下面创建的 tr 和 td 标签的样式(例如,我想为 tr 和 td 标签添加填充)。
I searched few places but didnt find a working solution.我搜索了几个地方,但没有找到可行的解决方案。 Can someone please respond.
有人可以回复吗。
$.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);
}
To modify all of your trs or tds items use a selector:要修改所有 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)
Of course to do this you sould add an id to your table, which could be done like this:当然要做到这一点,你应该在你的表中添加一个 id,可以这样完成:
var table = $("<table>", {id:'table_id'});
Similarly you can edit the table using a selector.同样,您可以使用选择器编辑表格。
Also, another could be to style them inline while creating it:此外,另一种可能是在创建时将它们内联样式:
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>");
Lastly, I could suggest use css:最后,我建议使用 css:
#table_id tr{
padding: w x y z;
}
#table_id tr td{
padding: w x y z;
}
I would try something like this:我会尝试这样的事情:
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);
}
});
Then you can style them using CSS.然后您可以使用 CSS 为它们设置样式。
.body-row {
padding: 3px;
}
.body-row .cell {
padding-right: 3px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.