table中点击一行tr，使其高亮

html文件：

<div class="cuttingDiv">
	<table>
		<thead>
		<tr>
			<td width="40px" align="center">序号</td>
			<td width="90px" align="center">位置</td>
			<td width="130px" align="center">编码</td>
			<td width="130px" align="center">安全码</td>
			<td width="70px" align="center">时间</td>
		</tr>
		</thead>
		<tbody class="cuttingTbody"></tbody>
	</table>
</div>

js文件：

/**
 * 刀具表格高亮部分
 */
function tableHighLight() {
    // 获取tr
    let trs = $(".cuttingTbody").find("tr");
    // 循环遍历
    for (let index = 0; index < trs.length; index++){
        // 设置点击事件
        trs[index].onclick = function () {
            for (let i = 0; i < trs.length; i++){
                trs[i].className = "";
            }
            this.className = "hover";
        }
    }
}

css文件：

/** 刀具列表tbody */
.cuttingTbody{font-size: 14px;color: #46bcc1;position: absolute;top: 35px}
/** 刀具列表高亮 */
.hover{background-color: #016165;cursor:pointer;}
/** 表格td 鼠标样式 */
tbody td{cursor:pointer;}

效果如图：