JQuery UIjavascript实现表格行间隔显示颜色并高亮显示的简单代码
本节内容：
表格行间隔显示颜色并实现高亮显示
1，javascript代码部分
复制代码 代码示例:
<script type="text/javascript">
var name; //存储tr对象的类名，当鼠标移开时进行恢复
function trcolor(){ //表格行颜色间隔显示
var tabNode = document.getElementsByTagName("table")[0];
var trNodes = tabNode.rows;
for(var x=1;x<trNodes.length;x++){
if(x%2 == 1)
trNodes[x].className = "one" ;
else
trNodes[x].className = "two" ;
trNodes[x].onmouseover = function(){ //高亮显示
name = this.className;
this.className = "over";
} // jquerycn.cn
trNodes[x].onmouseout = function(){ //tr对象添加onmouseout事件属性
this.className = name ;
}
}
}
window.onload = trcolor ;
</script>
2，css部分
复制代码 代码示例:
<style type="text/css">
table{ width:60%; border:solid 1px #0066FF;}
table td {border:solid 1px #0099ff;}
a{ text-decoration: none;}
.one{background-color: red;}
.two{background-color: blue;}
.over{background-color: yellow;}
</style>
3，html内容部分
复制代码 代码示例:
<body>
<table>
<tr>
<td>姓名</td><td>年龄</td><td>地址</td>
</tr>
<tr>
<td>张三</td><td>23</td><td>北京</td>
</tr>
<tr>
<td>李四</td><td>25</td><td>上海</td>
</tr>
<tr>
<td>王五</td><td>15</td><td>广州</td>
</tr>
<tr>
<td>唐总</td><td>20</td><td>长沙</td>
</tr>
</table>
</body>
相关热词：
本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jq/jc/10354.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
PHP识别相片是否是颠倒的
时间：2020-12-28
-
python编程有哪些ide
时间：2020-12-28
-
python开发工程师是做什么
时间：2020-12-28
-
php构造函数的作用
时间：2020-12-28
-
php怎么跟数据库连接
时间：2020-12-28
-
php实现顺序线性表
时间：2020-12-28
-
Python多重继承中的菱形继
时间：2020-12-28
-
php中break的作用
时间：2020-12-28
热门文章
-
php中常用的正则表达式使用方法
时间：2020-12-25
-
asp与php区别是什么？
时间：2020-12-27
-
PHP识别相片是否是颠倒的，并且重新摆正
时间：2020-12-28
-
Yii授权之基于角色的存取控制 （RBAC）
时间：2020-12-23
-
php的一键安装包有哪些 php环境搭建
时间：2020-12-19
-
php实现对图片对称加解密（适用身份证加
时间：2020-12-25
-
php如何理解面向对象
时间：2020-12-28
-
超详细分析php docker的原理及作用
时间：2020-12-27
-
Python控制Excel实现自动化办公
时间：2020-12-23
-
session的作用是什么
时间：2020-12-25