JSFiddle - React, Tailwind, and code Playground

HTML

<table id="people">
<tbody>
    <tr><td>1</td><td onclick='tdclick(event)'>jason</td></tr>
    <tr><td>2</td><td onclick='tdclick(event)'>thomas</td></tr>
    <tr><td>3</td><td onclick='tdclick(event)'>kert</td></tr>
    <tr><td>4</td><td onclick='tdclick(event)'>jap</td></tr>
</tbody>
</table>

CSS

#people { width:98%; border-collapse:collapse; } 
#people th, #people td{ border: silver 1px solid; text-align:center; }

.odd{background-color:#CCCCFF;}
.even{background-color:#BFFFFF;}
.enter{background-color:#FFCCFF;}

JavaScript

// 基、偶數列新增 css 
$("#people tr:odd").addClass("odd");
$("#people tr:even").addClass("even");
function trclick(){
    console.log('tr clicked')
}

function tdclick(e){ 
    if (!e) var el = window.event;                // Get the window event
    e.cancelBubble = true;                       // IE Stop propagation
    if (e.stopPropagation) e.stopPropagation();  // Other Broswers
    console.log('td clicked');
}  
// 為 id 等於 people 的 table元件 的 每一個 row  附加 mouseenter 和 mouseout 事件
$("#people tr").hover(
    function(){
        $(this).addClass("enter"); // 觸發 mouseenter 事件 新增 css 
        $(this).find(":button").show();
    },
    function(){
        $(this).removeClass("enter"); // 觸發 mouseleave 事件 移除 css 
        $(this).find(":button").hide();
    }
);