javascript简单实现表格行间隔显示颜色并高亮显示
更新时间：2013年11月29日 15:37:48 作者：
表格行间隔显示颜色并实现高亮显示，这种效果大家都有见到过吧，下面就为大家详细介绍下,需要的朋友可不要错过
复制代码 代码如下:
<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";
}
trNodes[x].onmouseout = function(){ //tr对象添加onmouseout事件属性
this.className = name ;
}
}
}
window.onload = trcolor ;
</script>
<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>
</head>
<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>
相关文章
这篇文章主要介绍了上传图片js判断图片尺寸和格式并兼容IE,需要的朋友可以参考下2014-09-09
这篇文章主要给大家介绍了关于js扁平数组和树结构相互转换处理方法的相关资料,之前面试有遇到过这个问题,面试官问如何把一个数组数据扁平,然后转化为Tree结构数据,工作中刚好也用到了,所以总结下,需要的朋友可以参考下2023-07-07
Tangram开源将近一周，持续围观了几天。写一个简单的围观笔记吧。2010-12-12
这篇文章主要给大家介绍了关于ES6小技巧之代替lodash的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
如果想做一个链接点击后不做任何事情，或者响应点击而完成其他事情一般都是设置属性href = "#"其实还有比这更好的方法，下面为大家整理了几种比较常见的解决方法，感兴趣的朋友可以参考下2013-08-08
JavaScript 放大镜是我成为前端后写的第一个组件, 从中学到了很多东西. 现在已经过去超过半年, 我希望能在自己仍有印象的时候, 整理和重新思考其中的一些处理方法, 将它改进, 并将这些想法写出来2011-05-05
这篇文章主要介绍了layer设置maxWidth及maxHeight解决方案，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了js模拟实现百度搜索，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
在VSCode中编写的TypeScript代码不能直接运行,需要先用tsc编译为JavaScript,然后才能运行,下面这篇文章主要给大家介绍了关于如何在vscode中使用Typescript并运行的相关资料,需要的朋友可以参考下2023-05-05
最新评论