Как стилизовать html таблицу (теги tr и td), создаваемую динамически с помощью Jquery

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

Я бы попробовал что-то вроде этого:

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

Answer 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)

Конечно, для этого вы должны добавить в таблицу идентификатор, что можно сделать так:

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