表格 隔行换色升级版
昨天弄了个表格隔行换色,但是只是一张表里换
如果一个页面里出现多个表格需要怎么整
捣鼓出新的结果
如下:
代码如下:
function onloadEvent(func){
var one=window.onload
if(typeof window.onload!='function'){
window.onload=func
}
else{
window.onload=function(){
one();
func();
}
}
}
function showtable(tableid){
var overcolor='#FCF9D8';
var color1='#FFFFFF';
var color2='#F8F8F8';
var tablename=document.getElementById(tableid)
var tr=tablename.getElementsByTagName("tr")
for(var i=0 ;i<tr.length;i++){
tr[i].onmouseover=function(){
this.style.backgroundColor=overcolor;
}
tr[i].onmouseout=function(){
if(this.rowIndex%2==0){
this.style.backgroundColor=color1;
}else{
this.style.backgroundColor=color2;
}
}
if(i%2==0){
tr[i].className="color1";
}else{
tr[i].className="color2";
}
}
}
onloadEvent(function init(){
showtable('table');
showtable('test');
}
);
这样在html里增加表格的时候加上ID就OK了,一个多次调用的表格隔行换色完毕
牛逼的人生不需要解释
相关推荐
-
CSS2实现的隔行换色
利用了CSS2 的 相邻选择符 IE7以下不支持 隔行换色示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>
-
不用javascript实现带序号的表格隔行换色的效果
.test{ border:1px solid #000; color:#333; font:12px; } .test ol li{ padding-left:5px; background-color:expression(this.sourceIndex%2? '#efefef':'#fefefe'); } 观自在菩萨 行深般若波罗密多时 照见五蕴皆空 度一切苦厄 舍利子 色不异空 空不异色 色既是空 空既是色 受想行识 亦复如是 舍利子 是诸法空相 不生不灭 不垢不净 不增不减 是故空中
-
jQuery方法简洁实现隔行换色及toggleClass的使用
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="js/jquery-1.4.2.min.js"></script> <style type=&quo
-
基于Jquery的表格隔行换色,移动换色,点击换色插件
效果图:编写JQUERY插件如下: 复制代码 代码如下: ;(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 option=$.extend({ odd:"odd", even:"even", selected:"selected" },options); //注意这个options 同上面的function(options)中的opt
-
javascript 隔行换色函数代码
先定义两个关于背景色的样式tag为id对象c1为样式1c2为样式2 复制代码 代码如下: <script> function changeRowsBg(tag,c1,c2) { var i = 0; var obj_tag = document.getElementsByTagName(tag); for(i = 0;i < obj_tag.length ;i++){ (i%2 == 0)? obj_tag(i).className = c1 : obj_tag(i).className
-
原生javascript实现隔行换色
js让我们一起从基础来学习,我们一点一点的来学习 下边是我写的代码,然后大家看着学习下吧!!! 复制代码 代码如下: <html> <head> <title>js演示</title> </head> <body> <script> document.write('<table border="1" width="100px" align="center"&
-
Js 实现表格隔行换色一例
Js实现表格隔行换色一例 body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:
-
表格隔行换色 css expression
第一行为其它颜色,这样写这个表达式 表格CSS测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试 表格测试
-
使用jquery hover事件实现表格的隔行换色功能示例
jQuery hover事件 hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数.当鼠标移出这个元素时,会触发指定的第二个函数.而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持"悬停"状态,而不触发移出事件(修正了使用mouseout事件的一个常
-
li隔行换色改进版
ghhs("nav01","li"); // 鼠标经过时变色 ghhs("nav02","li","no"); // 只隔行换色 ghhs("nav03","li","onclick"); // 鼠标点击当前标记变色 隔行换色 - www.jb51.net 我们 // 返回Id.Tag function Pid(id,tag){ if(!tag
-
jQuery 隔行换色 支持键盘上下键,按Enter选定值
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
随机推荐
- Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
- vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
- 简述angular自定义过滤器在页面和控制器中的使用
- asp汉字中文图片验证码的实现代码
- asp下通过HTTP_USER_AGENT判断用户是从手机上访问,还是电脑IE上访问
- java/jsp中 中文问题详解
- 并发数据库压力测试的shell脚本代码
- sql2005 附加数据库出错(错误号:5123)解决方法
- FOXHIS PMS前台西软服务器端和客户端安装教程
- JAVA Stack详细介绍和示例学习
- Java函数式编程(六):Optional
- 再谈异常处理try catch finally
- C# Socket网络编程实例
- Python中字符串与编码示例代码
- SQL Server基础之行数据转换为列数据
- MySQL语句整理及汇总介绍
- Android使用动画设置ProgressBar进度的方法
- 利用控制台如何对Redis执行增删改查命令
- Java JVM程序指令码实例解析
- Java栈的应用之括号匹配算法实例分析