JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Uno</td>
        <td>Dos</td>
        <td>Tres</td>
    </tr>
    <tr>
        <td>Uno</td>
        <td>Dos</td>
        <td>Tres</td>
    </tr>
    <tr>
        <td>Uno</td>
        <td>Dos</td>
        <td>Tres</td>
    </tr>
</table>

CSS

table, table *{
    border: .1em solid;
    font-size: 1.2em;
    cursor: pointer;
}

JavaScript

var filas = document.getElementsByTagName("tr"),
    total = filas.length;

for (i = 0; i < total; i++){
    filas[i].addEventListener("mouseover", function(){
        this.style.background = "red";
    }, false);
    
    filas[i].addEventListener("mouseout", function(){
        if (!this.getAttribute("data-click") || this.getAttribute("data-click") == 0)
            this.style.background = "white";
        console.log(this.getAttribute("data-click"));
    }, false);
    
    filas[i].addEventListener("click", function(){
        if (!this.getAttribute("data-click") || this.getAttribute("data-click") == 0)
            this.setAttribute("data-click", 1);
        else
            this.setAttribute("data-click", 0);
    }, false);
}