JavaScript实现表格的隔行换色以及高亮显示
来源：Java联盟
有些时候，我们会从后台获取数据，然后以表格的形式显示到前台页面~但是如果数据量很大的话就会不利于查看~也就是我们常说的注意用户体验~
总之用户不开心~那么老板就会不开心，老板不开心咱们就别想开心了~所以咱们开动吧~
表格的隔行换色
步骤分析：
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的路上请多多指教
扩展阅读
微信公众号：javafirst
扫码关注免费获取更多资源