Simple CSS JS control table interlaced color

(1) using expression

Mouse slide over discoloration:

<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> 1th row </td><td> 1th column </td></tr>
<tr><td> 2nd row </td><td> 2nd Column </td></tr>
<tr><td> 3rd row </td><td> 3rd column </td></tr>
<tr><td> 4th row </td><td> 4th column </td></tr>
<tr><td> 5th row </td><td> 5th column </td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－

Simple interlaced discoloration:

<style type= "Text/css" >
<!--
TR {background-color:expression (this.sectionrowindex%2==0)? " #E1F1F1 ":" #F0F0F0 ")}
-
</style>

<table>
<tr><td> 1th row </td><td> 1th column </td></tr>
<tr><td> 2nd row </td><td> 2nd Column </td></tr>
<tr><td> 3rd row </td><td> 3rd column </td></tr>
<tr><td> 4th row </td><td> 4th column </td></tr>
<tr><td> 5th row </td><td> 5th column </td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

Each cell color:

<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> 1th row </td><td> 1th column </td></tr>
<tr><td> 2nd row </td><td> 2nd Column </td></tr>
<tr><td> 3rd row </td><td> 3rd column </td></tr>
<tr><td> 4th row </td><td> 4th column </td></tr>
<tr><td> 5th row </td><td> 5th column </td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－

The above all uses expression, the realization becomes very convenient, but, after the test, in IE6 (other version I do not know) is very normal, does not have any response on Firefox .... To have this effect on Firefox, use the second method

(2) use JS

Mouse slide over discoloration:

<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> 1th row </td><td> 1th column </td></tr>
<tr><td> 2nd row </td><td> 2nd Column </td></tr>
<tr><td> 3rd row </td><td> 3rd column </td></tr>
<tr><td> 4th row </td><td> 4th column </td></tr>
<tr><td> 5th row </td><td> 5th column </td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－

Interlaced color:

<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> 1th row </td><td> 1th column </td></tr>
<tr><td> 2nd row </td><td> 2nd Column </td></tr>
<tr><td> 3rd row </td><td> 3rd column </td></tr>
<tr><td> 4th row </td><td> 4th column </td></tr>
<tr><td> 5th row </td><td> 5th column </td></tr>
</table>

－－－－－－－－－－－－－－－－－－－－－－－－

Above all to use JS, also need table has an ID, you can operate on the specified table, but if you meet someone's Firefox installed noscript words ... Can ignore the

－－－－－－－－－－－－－－－－－－－－－－－－

Alternating color of the mouse after discoloration

<title> color-changing mouse </title>
<style type= "Text/css" media= "
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>

<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>

－－－－－－－－－－－－－－－－－－－－－－－－

Table interlaced color + mouse click to change colors

<title> table interlacing + mouse Click to change color </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";//originally intended to be directly used to judge the background color, FF gets the background is the RGB value, bad judgment
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>
<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 ("Table name", "Odd row Background", "even row background", "Mouse over Background", "click Back Background");
SENFE ("Senfe", "#fff", "#ccc", "#cfc", "#f00");
--></script>
</body>

－－－－－－－－－－－－－－－－－－－－－－－－

Color change after mouse placement

<title> color change after mouse placement </title>

<script type= "Text/javascript" >
<!--
Odd line default color, even line color, and odd and even row color when mouse is on
var abgcolor = ["#FFFFFF", "#f2faff", "#FFFFCC", "#FFFFCC"];
Change color from the front ihead line until the countdown iend line ends
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>

<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>

Simple CSS JS control table interlaced color