JavaScript实现表格的隔行换色以及高亮显示

有些时候，我们会从后台获取数据，然后以表格的形式显示到前台页面~但是如果数据量很大的话就会不利于查看~也就是我们常说的注意用户体验~

总之用户不开心~那么老板就会不开心，老板不开心咱们就别想开心了~所以咱们开动吧~

表格的隔行换色

步骤分析：

1）确定事件(onload)并为其绑定一个函数。

2）书写函数(获取表格)，获取tbody里面的行数。

3）分别对奇数行和偶数行设置背景颜色

先来创建表格

我们之前分享的时候只说了<table>标签，现在我们来补上一个知识点<thead>标签~这个是表示表头的标签~

这样我们的表格信息就写好了，再来写一下JavaScrip函数t代码：这边我们使用的是匿名函数，JS 中的 onload 事件会在页面或图像加载完成后立即发生。

1）首先利用表格的id获取表格元素

2）然后获取到表各种的行数

3）遍历行数，如果是偶数就把背景色设置成银色，如果是奇数就把背景色设置成为白色~

看一下页面效果： 这里要注意一点数组是从0开始计数的~虽然我们的序号是“1”但是在数组中它是第“0”个元素~所以是银色的~

高亮显示

在表格中除了这个这种隔行换色显示效果，还有一种就是我们鼠标选中这行数据，这行数据就显示不同的1颜色，这种就做高亮显示~下面我们来实现一下~

根据需求分析：

1）确定事件，这个效果和鼠标选中有关（onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

）

2）书写函数，获取鼠标选中的那行数据并修改其背景色~

首先给每一行表格添加一个id号~然后分别为这行添加事件并绑定函数，

现在来补全函数

效果图：

这个效果是鼠标滑动到哪一行哪一行就会改变背景颜色~

咱们还是学习知识点为主哈~

我是萌新娜娜

立志做一个不翻车的老司机

学习Java的路上请多多指教

扩展阅读

JavaScript面向对象精要

JavaScript入门写一个表单校验功能

利用HTML表单标签编写一个注册页面

来源：Java联盟

文章来源网络，版权归作者本人所有，如侵犯到原作者权益，请与我们联系删除或授权事宜