如何为使用 Jquery 动态创建的 html 表（tr 和 td 标签）设置样式答案

【问题标题】：How to style html table (tr and td tags) created dynamically with Jquery如何为使用 Jquery 动态创建的 html 表（tr 和 td 标签）设置样式
【发布时间】：2020-08-06 05:14:52
【问题描述】：

我有一个 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);

                                }

【问题讨论】：

为什么不使用 CSS add 给每个特定的类属性？

标签： javascript html jquery jquery-ui html-table

【解决方案1】：

我会尝试这样的：

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;
}

【讨论】：

【解决方案2】：

要修改所有 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;
}

【讨论】：