A few days ago, due to work needs, we had to perform a line-by-line color change for a table, but we had to add the mouse to the effect. However, the table was generated by the program. If onmouseover is added to the tr tag, the workload would be very heavy, then try to use js to implement the above functions. The only change to the table is to add the ID to the table label.
I searched for many methods on the internet, almost all of which were modifying the tr tag. Fortunately, I found a method that completely changed the line through JS (the author cannot be verified after reprinting ), however, the mouse color cannot be changed. After modification, the mouse color can be changed.
This Code reflects the idea of Web reconstruction and achieves the separation of structure and performance.
See the results:
<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> test </title>
<Style Language = "text/CSS">
/* First color */
# Table tr. color1 {
Background-color: # ffffff;
}
/* Second color */
# Table tr. color2 {
Background-color: # f8f8f8;
}
</Style>
<SCRIPT type = "text/JavaScript">
<! --
Function onloadevent (func ){
VaR one = Window. onload
If (typeof window. onload! = 'Function '){
Window. onload = func
}
Else {
Window. onload = function (){
One ();
Func ();
}
}
}
Function showtable (){
VaR tableid = 'table'; // table ID
VaR overcolor = '# fcf9d8'; // the color of the mouse.
VaR color1 = '# ffff'; // The first color.
VaR color2 = '# f8f8f8'; // The second color.
VaR tablename = Document. getelementbyid (tableid)
VaR TR = tablename. getelementsbytagname ("TR ")
For (VAR I = 1; 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 (showtable );
-->
</SCRIPT>
</Head>
<Body id = "" class = "">
<Table width = "100%" border = "0" cellspacing = "1" cellpadding = "4" class = "list" name = "table" id = "table">
<Thead>
<Tr>
<TH> Process </Th>
<TH> initiator </Th>
<TH> Start time </Th>
<TH> Status </Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
<Tr>
<TD> <a href = ""> test row </a> </TD>
<TD> none </TD>
<TD> 17:21:04 </TD>
<TD> end </TD>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
<A href = "http://js.alixixi.com/"> welcome to the special effect code station on the Ali West web page, js.alixixi.com </a>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
