how to change the text color of table data in tr.append($("<td>"

Question

I would like to see table data Status text color is red when it is Active and green when it is Inactive.

I tried many different ways but failed. Any helpful suggestions will be appreciated. Thanks for your time and effort. How is it possible?

HTML code given below:

<form>
    <div class="form-group">
        <label for="upload-csvd43">Select Payload csv file</label>
        <input type="file" class="form-control-file" id="upload-csvd43" accept=".csv">
    </div>
</form>
<button type="submit" class="btn btn-success" id="btn-upload-csvd43">Parse Data</button>
<button type="reset" class="btn btn-danger" onclick="resetpage()" >Reset</button>

<div class="container">
    <br><br>
    <table class="table table-bordered table-hover table-condensed" id="countryTable">
        <thead>
        <tr>
            <th>Sr.</th>
            <th>Date</th>
            <th>Data</th>          
            <th>Status</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

<br>
<br>
</div>

I used the following script to parse table data. papaparse was used to parse csv file.

<script type="text/javascript">
   document.getElementById('btn-upload-csvd43').addEventListener('click', ()=> {
        Papa.parse(document.getElementById('upload-csvd43').files[0], {
            download: true,
            header: true,
            complete: function(results) {
              
                let countKey = Object.keys(results.data).length;
                var tbody = $("#countryTable > tbody");
                tbody.empty();
               for (let i=0; i<countKey-1;i++)
               {
                       var raw = results.data[i].Data;
                       let Status = 'Inactive';
                       let tp= ((parseInt(raw.slice(1,2),16))>>2) & 0x01;
                       if (tp)
                           status = 'Active';
                      
                       var tr = $("<tr>");
                       tr.append($("<td>", {
                           'text': i+1
                       }));
                       tr.append($("<td>", {
                           'text': results.data[i].Timestamp
                       }));
                       tr.append($("<td>", {
                           'text': results.data[i].Data
                       }));
                       
                       tr.append($("<td>", {
                           'text': status
                       }));
                       
                       tbody.append(tr);
                   }

               }


            }
        });

    });

    function resetpage() {
        window.location.reload();
        }

</script>

Answer 1

You can check if the status value is Active/Inactive depending on this add required class to the td using 'class': status == "Active" ? "red_color" : "green_color" .

Demo Code :

//this is just for demo...
var results = {
  "data": [{
    "Data": "12734934394848484415",
    "Timestamp": "12:30"
  }, {
    "Data": "157349343948484844153",
    "Timestamp": "11:30"
  }]
}
document.getElementById('btn-upload-csvd43').addEventListener('click', () => {
  /* Papa.parse(document.getElementById('upload-csvd43').files[0], {
       download: true,
       header: true,
       complete: function(results) {*/

  let countKey = 3;
  var tbody = $("#countryTable > tbody");
  tbody.empty();
  for (let i = 0; i < countKey - 1; i++) {
    var raw = results.data[i].Data;
    let status = 'Inactive';
    let tp = ((parseInt(raw.slice(1, 2), 16)) >> 2) & 0x01;

    if (tp)
      status = 'Active';

    var tr = $("<tr>");
    tr.append($("<td>", {
      'text': i + 1
    }));
    tr.append($("<td>", {
      'text': results.data[i].Timestamp
    }));
    tr.append($("<td>", {
      'text': results.data[i].Data
    }));
    //check if status is active/incative add required class
    tr.append($("<td>", {
      'text': status,
      'class': status == "Active" ? "red_color" : "green_color"
    }));

    tbody.append(tr);

  }


  /*}
    }
  });*/

});

.red_color {
  color: red
}

.green_color {
  color: green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <label for="upload-csvd43">Select Payload csv file</label>
    <input type="file" class="form-control-file" id="upload-csvd43" accept=".csv">
  </div>
</form>
<button type="submit" class="btn btn-success" id="btn-upload-csvd43">Parse Data</button>
<button type="reset" class="btn btn-danger" onclick="resetpage()">Reset</button>

<div class="container">
  <br><br>
  <table class="table table-bordered table-hover table-condensed" id="countryTable">
    <thead>
      <tr>
        <th>Sr.</th>
        <th>Date</th>
        <th>Data</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

  <br>
  <br>
</div>