JavaScript学习——表格的隔行换色+高亮显示
1、案例一：我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下：
1）新标签
<thead> //表头
<tr>
<th></th>
</tr>
</thead>
<tbody> //表格内容
<tr>
<td></td>
9 </tr>
</tbody>
2)步骤分析
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写函数(获取表格)
第三步：获取tbody里面的行数(长度rows.length)
第四步：对tbody里面的行进行遍历
第五步：获取奇数行和偶数行(角标对2取余)
第六步：分别对奇数行和偶数行设置背景颜色(.style.backgroundColor)
3)代码实现（window.onload设置隐名函数）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
window.onload=function(){
//1.获取表格
var tblEle=document.getElementById("tbl");
//2.获取表格中tbody里面的行数（长度）这里的0指的是第一个tbody
var len=tblEle.tBodies[0].rows.length;
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.background="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.background="gold";
}
}
}
</script>
</head> <body>
<table border="1px" width="500px" height="50px" align="center" id="tbl">
<thead>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
在谷歌浏览器内运行，得到需求中的效果。
2、案例二：实现一个表格的高亮显示
1）JS事件
onmouseover()鼠标移入事件。鼠标从外部移入到当前元素时触发。
onmouseout()鼠标移出事件。鼠标从当前元素移出时触发。
2）步骤分析：
第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步：获取鼠标移上去的那行，对其设置背景颜色
3）代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格高亮显示</title>
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.background="pink";
}else if(flag=="out"){
document.getElementById(id).style.background="white";
}
}
</script>
</head> <body>
<table border="1px" width="500px" height="50px" align="center" id="tbl">
<thead>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
在谷歌浏览器内运行，实现的效果就是光标移动到某一行，这一行就变成粉色，移开就显示白色。
JavaScript学习——表格的隔行换色+高亮显示的更多相关文章
- jQuery_完成表格的隔行换色
表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...
- Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- 使用JS创建表格以及隔行换色（包括隔N行换色）
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
- JS案例四：表格的隔行换色以及高亮显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 模块：jquery实现表格的隔行换色
效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...
- Angular 学习笔记——ng-repeat 隔行换色
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- js课程 4-11 表格如何实现隔行换色
js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...
- javascript 表格隔行换色
用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
随机推荐
- POJ 2524 Ubiquitous Religions 【并查集】
解题思路:输入总人数 n,和m组数据:即和杭电畅通工程相类似,对这m组数据做合并操作后,求最后一共有多少块区域. #include<stdio.h> int pre[50001]; int ...
- Core Graphics框架 利用Quartz 2D绘图
首先,什么是Core Graphics和Quartz 2D? Core Graphics:是基于Quartz 2D绘图引擎的一个C语言的API绘图框架.它也是iOS开发中最基本的框架(Framewor ...
- Unity 动画系统(Mecanim) 术语及翻译 表格
原文 翻译 Animation Clip 视频片段 Avatar 阿凡达 Retargeting 重定向 Rigging 绑定 skinning 蒙皮 Animator Component 动画组件 ...
- CorelDRAW X6最新注册激活机制
最近购买CorelDRAW X6的小伙伴可能对如何注册激活软件存在疑惑,下面小编一步步教您如何快速激活CorelDRAW X6. CorelDRAW X6最新注册机制如下: 1.关注“Corel服务中 ...
- baidu练习/html/css
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- ELK搭建和部署-----（上半部分）
本实验基于centos7安装部署操作步骤如下: 1.首先准备两台centos7系统,IP地址自行定义. 2.先在服务器上安装时间同步中间件为chronyc 3.并启动命令为systemctl star ...
- sudo日志审计
一般企业生产环境都会用跳板机把操作日志记录下来,不过有些公司内部的测试机可以用本机的sudo日志审计功能将执行的sudo命令保存日志. 为什么要使用sudo审计,因为可以通过sudo授权给普通用户执行 ...
- NOIP2018提高组金牌训练营——字符串专题
NOIP2018提高组金牌训练营——字符串专题 1154 回文串划分 有一个字符串S,求S最少可以被划分为多少个回文串. 例如:abbaabaa,有多种划分方式. a|bb|aabaa - 3 个 ...
- 推荐几款常用的Eclipse插件
Eclipse 应该说是老牌也是最常用的Java开发工具,尽管这几年 InstelliJ IDEA 的发展势头很强劲,身边使用和推崇的人也大有人在,但个人而言还是觉有些不太习惯.这里也介绍几款自己常用 ...
- MD5加密技术
前几天,在看OpenVXI3.4的时候,偶然发现了几个奇怪的文件,那就是OpenVXI-3.4\src\cache下面的,base64.c,base64.h,md5.c,md5.h.既然有人把源代码给 ...