JSFiddle - React, Tailwind, and code Playground

by Satinder singh

HTML

<table id="myTable">
    <tr>
        <th>Sr</th>
        <th>Name</th>
        <th></th>
    </tr>
            <tr>
                <td>1</td>
                <td>John Cena</td>
                <td><span class='btnRemove'>X</span></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shawn Michel</td>
                <td><span class='btnRemove'>X</span></td>
            </tr>
            <tr>
                <td>3</td>
                <td>The Rock</td>
                <td><span class='btnRemove'>X</span></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Stev Austin</td>
                <td><span class='btnRemove'>X</span></td>
            </tr>
</table>

CSS

td {
    width:100px;
    text-align:left;
}
th{ text-align:left;}

.btnRemove{
    color:red;
    cursor:pointer;
}

.red{
    border:1px solid;
    color:red;
}

JavaScript

$("#myTable").on('hover','td',function(){
var self=$(this);
    $("tr").removeClass("red")
    self.closest("tr").addClass("red");
});