JS应用实例4：表格隔行换色
HTML代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
window.onload = function() {
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中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.backgroundColor = "blue";
} else {
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor = "gold";
}
}
}
</script> </head> <body>
<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</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>
效果：
表格高亮显示：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
function changeColor(id, flag) {
if(flag == "over") {
document.getElementById(id).style.backgroundColor = "red";
} else if(flag == "out") {
document.getElementById(id).style.backgroundColor = "yellow";
}
}
</script> </head> <body>
<table border="1" width="500" height="50" align="center">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</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>
效果：
鼠标移到上面变成红色，移开变成黄色，不移动时候没有颜色
JS应用实例4：表格隔行换色的更多相关文章
- jQuery应用实例2：表格隔行换色
这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...
- JQuery案例一：实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习(四)——使用JQ完成表格隔行换色
1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...
- jQuery实现表格隔行换色且感应鼠标高亮行变色
jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...
- table 表格隔行换色实现
table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:
- javascript 表格隔行换色
用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...
- js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用
主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...
- 原生js实现音乐列表（隔行换色、全选）
一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时 结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...
随机推荐
- docker安装portainer
安装好docker之后,可以使用portainer对容器进到管理 docker安装portainer命令 #这一步可以省略,直接运行可以下一条docker pull portainer #因为dock ...
- cadence 17.2 安装破解
安装包都在gaobo百度云/工具/开发工具 或者 下载链接 进去pcb edit 可能会提示 licese什么的,忽略就可以了.
- VS2010 Chart控件（一）Chart控件在ASP.NET网站中的应用示例详解（C#语言）
步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...
- EasyChat简易聊天室实现
我是个技术新人,刚刚毕业,平时遇到问题都是在网上查找资料解决,而很多经验都来自园子,于是我也想有自己的园子,把自己的编程快乐与大家分享. 在学校学习的期间,老师带我们做winform,那时候我什么都不 ...
- 227. Basic Calculator II 无括号版本计算器
［抄题］: Implement a basic calculator to evaluate a simple expression string. The expression string con ...
- [leetcode]80. Remove Duplicates from Sorted Array II有序数组去重(单个元素可出现两次)
Given a sorted array nums, remove the duplicates in-place such that duplicates appeared at most twic ...
- mysql解压缩版安装方法以及mysql无法启动1067错误
https://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html我下载的版本号是5.6.421.解压到C:\Program Files\M ...
- mysql 的 select into 带来的错误数据问题
在写存储过程的时候,会有一个被忽视的问题: 比如 select user_name into @user_name from user where id = 1; 会出现 其实没有 id =1 这条数 ...
- python基础之Day13
一.有参装饰器 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
- Activity 重载方法 onStart和onResume、onPause和onStop的区别
Activity 重载方法 onStart和onResume.onPause和onStop的区别 首先了解Activity的四种状态 Running状态:一个新的Activity启动入栈后,它在屏幕最 ...