如何設置使用 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;
}