I can't change my text color through jQuery-CodePudding

I have tried to apply a styling condition through an if statement in my JQuery based on an API result, but I can't seem to see the color change. I have assigned an ID to try change the color through css.

$.getJSON(API2, function (result) {
  console.log(result);

  for (i = 0; i < result.length; i  ) {
    var tabledata = `
      <tbody>
        <tr>
          <th scope="row">`  result[i].Season   `</th>
          <td><p >`  result[i].DateTime   `</p></td>
          <td><p >`  result[i].Name   `</td>
          <td><p  >`  result[i].Status   `</p></td>
        </tr>
    `;

    var stat = result[i].Status;
    $(".event").append(tabledata);
  }

  if (stat == "final") {
    $(".td-stat").attr('id', 'td-stat');
    console.log(stat);
  }
});

CodePudding user response：

Consider the following example.

$.getJSON(API2, function(result) {
  console.log(result);
  $("<tbody>").appendTo(".event");
  $.each(result, function(i, r) {
    var row = $("<tr>").appendTo($(".event tbody"));
    $("<th>", {
      scope: "row"
    }).html(r.Season).appendTo(row);
    $("<td>").html($("<p>", {
      class: "td-item"
    }).html(r.DateTime)).appendTo(row);
    $("<td>").html($("<p>", {
      class: "td-item"
    }).html(r.Name)).appendTo(row);
    $("<td>").html($("<p>", {
      class: "td-item stat "   (r.Status == "final" ? "final" : "")
    }).html(r.Status)).appendTo(row);
  });
});

This creates a tbody and populates rows for each entry in result.

CodePudding user response：

You should give them an Id or get them like an Array and try to loop over them like but for changing color you should use this :

$("#yourElementId").css('color', 'red');