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

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


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

表格的隔行换色

步骤分析:

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

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

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


先来创建表格

我们之前分享的时候只说了

标签,现在我们来补上一个知识点标签~这个是表示表头的标签~

JavaScript实现表格的隔行换色以及高亮显示_第1张图片


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

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

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

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

JavaScript实现表格的隔行换色以及高亮显示_第2张图片


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

JavaScript实现表格的隔行换色以及高亮显示_第3张图片


高亮显示

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


根据需求分析:

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


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


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

JavaScript实现表格的隔行换色以及高亮显示_第4张图片


现在来补全函数

JavaScript实现表格的隔行换色以及高亮显示_第5张图片


效果图:

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

JavaScript实现表格的隔行换色以及高亮显示_第6张图片


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


640?wx_fmt=jpeg

我是萌新娜娜

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

学习Java的路上请多多指教


扩展阅读

JavaScript面向对象精要

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

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


来源:Java联盟

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

你可能感兴趣的:(JavaScript实现表格的隔行换色以及高亮显示)