JSFiddle - React, Tailwind, and code Playground

HTML

<table id="people">
<tbody>
    <tr><td>1</td><td>jasonm</td></tr>
    <tr><td>2</td><td>thomas</td></tr>
    <tr><td>3</td><td>kert</td></tr>
    <tr><td>4</td><td>jay</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:#EFF1F1;}
.even{background-color:#F8F8F8;}
.enter{background-color: #0099CC;}

JavaScript

// 基、偶數列新增 css 
$("#people tr:odd").addClass("odd");
$("#people tr:even").addClass("even");

// 為 id 等於 people 的 table元件 的 每一個 row  附加 mouseenter 和 mouseout 事件
$("#people").on("mouseenter","tr",function(){
    $(this).addClass("enter"); // 觸發 mouseenter 事件 新增 css 
}).on("mouseout","tr",function(){
    $(this).removeClass("enter"); // 觸發 mouseout 事件 移除 css 
});