JSFiddle - React, Tailwind, and code Playground

by glenderson

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.js"></script>
<table id="mytable">
    <thead>
        <tr>
            <th>Color Me Column</th>
            <th>C1</th>
            <th>C2</th>
            <th>C3</th>
        </tr>
    </thead>
    <tbody>
        <tr id="myrow">
            <td>0</td>
            <td>Name</td>
            <td>Other</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>Type in Numerical Values (0-2), then click on the background
<input type="text" onChange="Changecell(this)">

CSS

.blue {
    background-color:blue;
}
.orange {
    background-color:orange;
}
.green {
    background-color:green;
}
.red {
    background-color:red;
}
.yellow {
    background-color:yellow;
}

JavaScript

function Changecell(event) {
    var cellValue = $(event).val();

    if (cellValue > 1) {
        cellClass = "red"
    } else if (cellValue == 1) {
        cellClass = "green"
    } else if (cellValue > 0) {
        cellClass = "yellow"
    } else {
        cellClass = "blue"
    }

    var table = $("#mytable").DataTable();
    var d = table.row("#myrow").data();
    d[0] = cellValue;
    d["cellclass_0"] = cellClass;

    d[3] = cellValue;
    d["cellclass_3"] = cellClass;

    //alert("Write: " + cellClass)
    table.row("#myrow").data(d).draw();
}

$(document).ready(function () {
    //alert("running")

    $("#mytable").DataTable({
        "rowCallback": function (row, data, index) {
            //alert("here")
            var cellClass = data["cellclass_0"];
            //alert("read: " + cellClass);
            $("td:eq(0)", row).removeClass("red green yellow orange blue");
            if (cellClass) {
                if (cellClass.length) {
                    $("td:eq(0)", row).addClass(cellClass);
                    //alert(cellClass);
                } else {
                    $("td:eq(0)", row).addClass("blue");
                    //alert("blue");
                }
            } else {
                $("td:eq(0)", row).addClass("orange");
                //alert("orange");
            }

        
            var cellClass = data["cellclass_3"];
            $("td:eq(3)", row).removeClass("red green yellow orange blue");
            if (cellClass) {
                if (cellClass.length) {
                    $("td:eq(3)", row).addClass(cellClass);
                } else {
                    $("td:eq(3)", row).addClass("blue");
                }
            } else {
                $("td:eq(3)", row).addClass("orange");
            }
        }

    })

})