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

最新推荐文章于 2024-04-19 12:50:41 发布

星星也会数人类嘛

最新推荐文章于 2024-04-19 12:50:41 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery table高亮

本文链接：https://blog.youkuaiyun.com/qq_42627162/article/details/89510524

本文介绍了一种使用HTML、CSS和JavaScript实现表格行高亮显示的方法。通过为表格行添加点击事件，当用户点击任意一行时，该行将被高亮显示，同时取消其他行的高亮状态。此功能增强了用户界面的互动性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;}