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" '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>