Use JS to display different colors in different rows in the table.

(Conversion) Use JS to display different colors in the table by line.

Use JS to display different colors in the table by line

First:
<Style>
Tr {bgColor: expression (
This. bgColor = (this. rowIndex) % 2 = 0 )? 'White ': 'yellow ');
}
</Style>
<Table id = "oTable" width = "100" border = "1" style = "border-collapse: collapse;">
<Tr> <td> & nbsp; </td> </tr>
<Tr> <td> & nbsp; </td> </tr>
<Tr> <td> & nbsp; </td> </tr>
<Tr> <td> & nbsp; </td> </tr>

Second:
<Script language = "javascript">
Var oTable = document. all ['otable'];
For (var I = 0; I <oTable. rows. length; I ++ ){
OTable. rows [I]. bgColor = (I % 2 = 0 )? 'White ': 'yellow ';
}
</Script>
<Table id = "oTable" width = "100" border = "1" style = "border-collapse: collapse;">
<Tr> <td> & nbsp; </td> </tr>
<Tr> <td> & nbsp; </td> </tr>
<Tr> <td> & nbsp; </td> </tr>

The third (the second release ):
Replace it with the bucket variable: Memory change time
Var isToggled = false;

Var oTable = document. all ['otable'];
For (var I = 0; I <oTable. rows. length; I ++ ){
IsToggled =! IsToggled;
OTable. rows [I]. bgColor = isToggled? "White": "yellow ";
}


Change the background color when the mouse passes
<Table> <tr> <td width = "100" height = "100" onmouseover = "style. backgroundColor = '# c86f70' "onmouseout =" style. backgroundColor = '# DDC676' "bgcolor =" # DDC676 "> ihandu </td> </tr> </table>


My method 1:
<! -- <Script language = "javascript">
Window. onload = function () {// different colors are displayed in the row separation table.
Var tab = document. getElementById ('tab ');
For (var I = 0; I <tab. rows. length; I ++ ){
Tab. rows [I]. bgColor = (I % 2 = 0 )? 'White': '# e6e6e6 ';
}
}
</Script>
-->


My method 2:
<Tr height = "22px" align = center style = "c: if test = '$ {status. count % 2 = 0} '>#ffffff </c: if> <c: if test =' $ {status. count % 2! = 0} '> # E6E6E6 </c: if> ">

 

Appendix:

<Script src = "jquery-1.7.min.js"> </script>
<Script>
$ (Document). ready (function (){
SetTableRowColor ();

});
// Use CSS to control the color of the even row
Function SetTableRowColor ()
{

$ ("# Table tr: odd" ).css ("background-color", "# e6e6fa ");
$ ("# Table tr: even" ).css ("background-color", "# fff0fa ");
}
</Scirpt>