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:表格隔行换色的更多相关文章

  1. jQuery应用实例2:表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  2. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  4. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  5. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  7. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  8. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  9. 原生js实现音乐列表(隔行换色、全选)

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

随机推荐

  1. 尚硅谷springboot学习25-嵌入式Servlet容器

    SpringBoot默认使用Tomcat作为嵌入式的Servlet容器:

  2. faster rcnn源码阅读笔记1

    自己保存的源码阅读笔记哈 faster rcnn 的主要识别过程(粗略) (开始填坑了): 一张3通道,1600*1600图像输入中,经过特征提取网络,得到100*100*512的feature ma ...

  3. P1880 [NOI1995]石子合并-(环形区间dp)

    https://www.luogu.org/problemnew/show/P1880 解题过程:本次的题目把石子围成一个环,与排成一列的版本有些不一样,可以在后面数组后面再接上n个元素,表示连续n个 ...

  4. Anaconda3(python3.5.2)中安装opencv3

    1 安装Visual C++2015 redistributable 我是64位和32的都安装了,如果你电脑中已经安装了17的,就先卸载了,不然安装不上. 2 安装依赖包Numpy.Scipy Num ...

  5. netty(六) websocket开发应用

    package com.lance.net.server.common; import java.net.InetSocketAddress; import org.springframework.s ...

  6. 错误:libstdc++.so.6: wrong ELF class

    1.安装mysql的时候报错缺少GLIBCXX_3.4.15 2.按照网上的下载了libstdc++.so.6.0.17 放到/usr/lib64 下 删除之前的libstdc++.so.6的链接 重 ...

  7. Windows Server 2016离线安装.NET Framework 3.5

    windows server 2016默认是不安装.netframework3.5的,可以在添加删除程序中单独添加.但是有时候系统安装文件不在的时候,找不到安装程序就不能安装成功. 这时候单独下载do ...

  8. EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  9. 微信小程序之 -----事件

    事件分类      1. 冒泡事件:     当一个组件上的事件被触发后,该事件会向父节点传递.      2. 非冒泡事件:   当一个组件上的事件被触发后,该事件不会向父节点传递.   常见的冒泡 ...

  10. Java并发集合(一)-CopyOnWriteArrayList分析与使用

    CopyOnWriteArrayList分析与使用 原文链接: http://ifeve.com/java-copy-on-write/ 一.Copy-On-Write Copy-On-Write简称 ...