当鼠标移到单元格(tr、td)背景变色多种解决方案

最新推荐文章于 2023-05-18 19:44:25 发布

sdfsf双方各

最新推荐文章于 2023-05-18 19:44:25 发布

阅读量1.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css js 文章标签： border javascript 脚本 menu table

本文链接：https://blog.csdn.net/zhouzilong502086525/article/details/6272149

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍了使用JavaScript实现表格单元格及其所在列背景颜色变化的方法。包括直接改变单个单元格颜色的简单代码示例，以及通过遍历表格或利用COL标签实现整列颜色变化的技术细节。

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

第一种：

td单元格变色，只用简单的js代码即可实现。

很简洁的代码，点击即可运行该代码
<body>
<table border="1px">
<tr>
<th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th>
</tr>
<tr>
<th>Menu Item2</th>
</tr>
</table>
</body>

第二种：

tr列变色。把鼠标移到一个表格上的时候表格一列的背景变色，可用于论坛列表、新闻发布系统、后台等等。提供两种解决方案。

解决思路：
我们知道，仅变换某个单元格的背景颜色的话用就行了，而要变换一列的背景颜色就必须要取得当前单元格在行中的索引值，然后遍历表格的所有行，改变行中相应单元格的背景颜色。
具体步骤：

方法一：利用表格的相关集合遍历设置。
1.插入表格代码

2.加入控制背景色功能的JavaScript脚本。

3.在表格中加入鼠标事件并触发相应函数后的完全代码如下：

//下面是一行变色
for(var i=0;i<tr.cells.length;i++)
tr.cells[i].bgColor=oColor

//下面是一列变色
//for(var i=0;i<tb.rows.length;i++)
// tb.rows[i].cells[td.cellIndex].bgColor=oColor
}
</script>

方法二：利用表格的COL标签将表格分组实现。
完整代码：

注意：虽然没有显式定义TBODY标签，但TBODY将为全部表格自动定义。
特别提示
因为方法二比方法一少了一个遍历，所以效果更高。代码运行后的效果如图 1.2.37所示。

图 1.2.37 鼠标移上单元格是单元格所在列的背景颜色全部改变
特别说明

本例涉及到的知识点比较多，逐一介绍如下：
col 指定基于列的表格默认属性。
colgroup 指定表格中一列或一组列的默认属性。
parentElement 获取对象层次中的父对象。
children 获取作为对象直接后代的 DHTML 对象的集合。
backgroundColor 设置或获取对象的背景颜色。