JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<table>
    <thead>
        <tr>
            <th>test</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>nema nista</td>
        </tr>
        <tr>
            <td>nema nista</td>
        </tr>
        <tr class="test">
            <td>sa .test klasom</td>
        </tr>
        <tr class="test">
            <td>sa .test klasom</td>
        </tr>
        <tr class="test">
            <td>sa .test klasom</td>
        </tr>
        <tr class="test">
            <td>sa .test klasom</td>
        </tr>
        <tr>
            <td>nema nista</td>
        </tr>
        <tr>
            <td>nema nista</td>
        </tr>
        <tr class="test">
            <td>sa .test klasom</td>
        </tr>
        <tr>
            <td>nema nista</td>
        </tr>
        <tr class="test">
            <td>sa .test klasom</td>
        </tr>
    </tbody>
</table>

CSS

/* 2 to 10 lines are only for easier focus*/
table, td, tr, th { 
    border: 1px dotted gray; 
    border-spacing: 0;
    border-collapse: collapse;
}

table {
    width: 50%;
}

.test {
    cursor: pointer;
}

JavaScript

var elms = document.getElementsByClassName("test");
var n = elms.length;
function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    }
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        changeColor("red");
    };
    elms[i].onmouseout = function() {
        changeColor("white");
    };
}