用javascript来完成表格高亮显示效果

来源：互联网 2023-03-16 23:57:54 版权归原作者所有，如有侵权，请联系我们

所谓高亮效果就是说当你的鼠标移动到它上方的时候，让它的颜色变得显眼；当你的鼠标移开的时候颜色恢复原色，让操作的人知道你的鼠标到这了。下面是在html中通过js(javascript)的来完成表格的高亮显示。

方法/步骤

首先我们来创建一个html5的文戴沟件（建议，当然你创建html4也是可以的），然后添加相关标题，比如这里就是“js完成表格高亮显示”

用javascript来完成表格高亮显示效果

在html的body标签下创建一个7行3列的表格（包含表头），并为每一个tr标签加上id。

用javascript来完成表格高亮显示效果

在浏览器内运行查看该html的初步效果，如下图，因为还没有添加事件和js代码，此时鼠标移动上表格行上时是没有反应的。

用javascript来完成表格高亮显示效果

接下来我们在每一个tr上添加事件，主要是onmouseover(鼠标在该行时要执行的操作)和onmouseout（鼠标移开时要执行的操作）。

因为两者执行的操作都是要改变当行的颜色，功能是一样的，只不过颜色不一样。所以我们要执行的方法要设置两个参数，一个是id,它的作用是定位到那一行，得毙诸到该行元素；另一个参数是用来辨别鼠标是over状态还是out的状态，毕竟不同状态对应不同的颜色。

用javascript来完成表格高亮显示效果

在html的头部通过script标签对引入javascript的代码，主要是完成对应的互凤劣方法。

该方法其实功能很简单：1.根据id获取对就在的元素，也就是确定哪一行。

2.然后根据传入进来的flag的参数，更改元素背景颜色。

用javascript来完成表格高亮显示效果

这样的话，高亮显示的是功能就完成了。再次通过运行可以看到如下结果。

说白了本次就是完成：根据鼠标的状态来更改表格行的背景颜色。

用javascript来完成表格高亮显示效果

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

上一篇：JS 拼接字符串下一篇：如何使用ES6中的数组对象方法填充数组的元素