JSFiddle - React, Tailwind, and code Playground

by Stallman41

HTML

<table border="1" cellspacing="1" width="100%" id="table1">
    <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
        <th>Column5</th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

CSS

tr.highlighted td {
    background-color: #000;
    color: #fff;
}

JavaScript

window.onload = function () {
    var rows = document.getElementById("table1").tBodies[0].getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].onclick = rowClickHandler;
    }
};

function rowClickHandler() {
    this.classList.toggle("highlighted");
}