You often need to use a table to display some things. When the table is relatively large, you may be dizzy when you look at it at a glance, and often misoperations occur because you don't see the row, the general solution is to change the color of the line by alternating lines or by moving the mouse over the line. The first one is too simple to say, and the second one is very simple, but each person has a different implementation method, the following provides a concise method, which supports IE6, IE7, and ff2. other browsers are not tested (ASP can be used for extension. net in the gridview ):
<! -- Blog garden Ding Xue http://www.cnblogs.com/dingxue 2007.8.9 -->
<! -- Color changes when you move the cursor over the table-concise implementation-IE6, IE7, and ff2 are supported, and other browsers are not tested -->
<HTML>
<Head>
<Title> color changes when you move the cursor over a table-concise implementation </title>
<Style type = "text/CSS">
# TB {width: 666px; border-collapse: collapse; Border: 1px solid # Eee; font-size: 14px ;}
# TB Th {Background: # Eee; border-bottom: 1px solid # CCC; padding: 4px ;}
# Tb td {border: 1px solid # Eee; padding: 4px ;}
</Style>
</Head>
<Body>
<Table id = "TB">
<Tr>
<TH> product name </Th>
<TH> unit price </Th>
<TH> Inventory quantity </Th>
<TH> goods location </Th>
</Tr>
<Tr>
<TD> Ding Xue's favorite xiansi deluxe edition-lingsha edition </TD>
<TD> 139 </TD>
<TD> 10000000 </TD>
<TD> A12-253 </TD>
</Tr>
<Tr>
<TD> xiansi deluxe edition-mengshu edition </TD>
<TD> 139 </TD>
<TD> 10000000 </TD>
<TD> A12-254 </TD>
</Tr>
<Tr>
<TD> xiansi normal edition-starter </TD>
<TD> 69 </TD>
<TD> 10000000 </TD>
<TD> A12-255 </TD>
</Tr>
</Table>
<SCRIPT type = "text/JavaScript">
VaR OBJ = Document. getelementbyid ("TB ");
For (VAR I = 0; I <obj. Rows. length; I ++) {// loop table row setting mouse events: Ding Xue http://www.cnblogs.com/dingxue
OBJ. Rows [I]. onmouseover = function () {This. style. Background = "# 0ef ";}
OBJ. Rows [I]. onmouseout = function () {This. style. Background = "";}
}
</SCRIPT>
