隔行变色---简单的css js控制table隔行变色
（1）用expression
鼠标滑过变色：
<style type="text/css">
<!--
table { background-color:#000000; cursor:hand; width:100%; }
td {
onmouseover:
expression(onmouseover=function (){this.style.borderColor
='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
简单的隔行变色：
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
每个单元格变色：
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
<table>
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
以上都用到expression，实现变得很方便，但是，经测试，在IE6（其它版本我不知道）上很正常，在firefox上无任何反应…… ，要想在firefox上也有此效果，就要用第二种方法
（2）用JS
鼠标滑过变色：
<script language="javascript">
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=tablename.getElementsByTagName("tr");
for (var i=0;i<=li.length;i++){
li[i].style.backgroundColor="#FFB584";
li[i].onmouseover=function(){
this.style.backgroundColor="#FFFFFF";
}
li[i].onmouseout=function(){
this.style.backgroundColor="#FFB584"
}
}
}
</script>
<table id="mytable">
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
隔行变色：
<script language="javascript">
window.onload=function showtable(){
var tablename=document.getElementById("mytable");
var li=tablename.getElementsByTagName("tr");
for (var i=0;i<=li.length;i++){
if (i%2==0){
li[i].style.backgroundColor="#FFB584";
}else li[i].style.backgroundColor="#FFFFFF";
}
}
</script>
<table id="mytable">
<tr><td>第1行</td><td>第1列</td></tr>
<tr><td>第2行</td><td>第2列</td></tr>
<tr><td>第3行</td><td>第3列</td></tr>
<tr><td>第4行</td><td>第4列</td></tr>
<tr><td>第5行</td><td>第5列</td></tr>
</table>
－－－－－－－－－－－－－－－－－－－－－－－－
以上都要用到JS，还需要table有个id，可以对指定的table操作，但是，假如遇到某人的firefox装了NoScript的话……可以无视了
－－－－－－－－－－－－－－－－－－－－－－－－
隔行变色的鼠标经过变色
<html>
<head>
<title>隔行变色的鼠标经过变色</title>
<style type="text/css" media="screen">
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}
.t2 {background-color:#eee;}
.t3 {background-color:#ccc;}
</style>
<script type="text/javascript">
var Ptr=document.getElementsByTagName("tr");
function recolor() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=recolor;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].onmouseover=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function(){
this.className=this.tmpClass;
};
}
</script>
</head>
<body>
<table width=400 align=center>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－
表格隔行换色+鼠标点击变色
<html>
<head>
<title>表格隔行换色+鼠标点击变色</title>
<style type="text/css"><!--
#senfe {
width: 300px;
border-top: #000 1px solid;
border-left: #000 1px solid;
}
#senfe td {
border-right: #000 1px solid;
border-bottom: #000 1px solid;
}
--></style>
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
--></script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="senfe">
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script language="javascript"><!--
//senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");
senfe("senfe","#fff","#ccc","#cfc","#f00");
--></script>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－
鼠标放置后变色
<html >
<head>
<title> 鼠标放置后变色 </title>
<script type="text/javascript">
<!--
//分别是奇数行默认颜色,偶数行颜色,鼠标放上时奇偶行颜色
var aBgColor = ["#FFFFFF","#f2faff","#FFFFCC","#FFFFCC"];
//从前面iHead行开始变色，直到倒数iEnd行结束
function addTableListener(o,iHead,iEnd)
{
o.style.cursor = "normal";
iHead = iHead > o.rows.length?0:iHead;
iEnd = iEnd > o.rows.length?0:iEnd;
for (var i=iHead;i<o.rows.length-iEnd ;i++ )
{
o.rows[i].onmouseover = function(){setTrBgColor(this,true)}
o.rows[i].onmouseout = function(){setTrBgColor(this,false)}
}
}
function setTrBgColor(oTr,b)
{
oTr.rowIndex
% 2 != 0 ? oTr.style.backgroundColor = b ? aBgColor[3] : aBgColor[1] :
oTr.style.backgroundColor = b ? aBgColor[2] : aBgColor[0];
}
window.onload = function(){addTableListener(document.getElementById("tbColor"),0,0);}
//-->
</script>
</head>
<body>
<table border="1" width="100%" id="tbColor">
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
<tr><td>11</td><td>11</td><td>11</td></tr>
</table>
隔行变色---简单的css js控制table隔行变色的更多相关文章
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- js控制表格隔行变色
只是加载时候隔行变一个颜色,鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0& ...
- js 控制 table style css
var table = objj.getElementsByTagName('table'); alert(table[i].width); if(table==null) return; for(v ...
- JS控制TABLE表格在任意一行下面添加一行（有待完善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css+js 控制幻灯片效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 伪元素after,before，css/js控制样式
CSS<style> body { font: 200%/1.45 charter; } ref::before { content: '\00A7'; letter-spacing: . ...
- CSS 控制table 滑动及调整列宽等问题总结
一. 通过css控制table y方向上滚动 html中没有滚动条,可以根据overflow属性的scroll来对table显示不完全的内容进行滚动. 只是y方向上滚动,很简单,只要设置div的hei ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
随机推荐
- linux下自定义dubbo的shell脚本
- 学习excel的使用技巧二批量复制
1 选中要操作的部分 2 CTRL+G 打开定位 3 点击 定位条件 4 选择空值 5 输入=号 然后键盘的 方向键 向上 6 按住CTRL+回车 即可实现 批量复制
- 《算法导论》——计数排序Counting Sort
今天贴出的算法是计数排序Counting Sort.在经过一番挣扎之前,我很纠结,今天这个算法在一些scenarios,并不是最优的算法.最坏情况和最好情况下,时间复杂度差距很大. 代码Countin ...
- java细节知识
代码优化细节 (1)尽量指定类.方法的final修饰符 带有final修饰符的类是不可派生的.在Java核心API中,有许多应用final的例子,例如java.lang.String,整个类都是fin ...
- lambda表达式，filter，map，reduce，curry，打包与解包和
当然是函数式那一套黑魔法啦,且听我细细道来. lambda表达式 也就是匿名函数. 用法:lambda 参数列表 : 返回值 例: +1函数 f=lambda x:x+1 max函数(条件语句的写法如 ...
- python——列表入门
学习列表先分析一段程序: list = ['zx', 'xkd', 1997, 2018] list1=list+[1,2,3]#列表拼接 list2=[list,list1] print('嵌套的列 ...
- javascript：控制台详解
javascript工具——浏览器控制台详解 大神这篇博客是写在2011年,主要介绍 “Firefox” 浏览器插件 “Firebug” 的操作,如今主流浏览器对控制台都已经提供了很好的支持.我自己 ...
- SpringBoot +Jpa+ Hibernate+Mysql工程
1 使用工具workspace-sts 3.9.5.RELEASE (1)新建一个SpringBoot 项目,选择加载项目需要的的组件.DevTools,JPA,Web,Mysql. Finish. ...
- Communication Model
[Communication Model] EOSIO actions operate primarily in a message-based communication architecture. ...
- Linux shell 信号继承
shell中,向进程发送信号多多通过ctrl键加上一些功能键来实现,这里是常见的Ctrl组合键及其意义: 组合键 信号类型 意义 Ctrl+C INT信号,即interrupt信号 停止运行当前的作业 ...