How to style html table (tr and td tags) created dynamically with Jquery

Question

I have an ajax call. 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 e.g. i want to add padding to tr and td tags) which i created below.

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

                                }

Answer 1

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.

.body-row {
  padding: 3px;
}

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

Answer 2

To modify all of your trs or tds items use a selector:

$("#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:

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:

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