Advantages:
1. Clean code, no redundant tags.
2. Style, structure separation (for convenience, style in the form of inline, the implementation of the application can be referred to in an external way.)
3. Use JS to control the progressive discoloration of the table
4. Support Highlighting for selected items
5. Full selection/cancellation of checkbox support
6. Pagination label has been done, did not do background code (later have time to update)
7. Compatibility test: Has tested ie5.01 ie5.5 IE6 IE7 ff2 Opera browser
<! 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" > <pead> <meta http-equiv= "Content-type" content=; charset=gb2312 "/> <title> friendly table </title> <style type=" Text/css "> *{font-family:tahoma, Arial, Helvetica, Sans-serif, "XXFarEastFont-Arial"; table{width:700px; margin:0px Auto; Font:georgia 11px; font-size:12px; Color: #333333; Text-align:center; border-collapse:collapse;/* thin form code/} table td{border:1px solid #999;/* Thin form line color/height:22px; } caption{text-align:center;font-size:12px;font-weight:bold;margin:0 Auto;} Tr.t1 td {Background-color: #fff;} /* The background color of the first row of alternating rows * * tr.t2 td {Background-color: #eee;} /* Alternating rows The background color of the second line * * TR.T3 td {Background-color: #ccc;} /* mouse over the background color * * Th,tfoot tr td{font-weight:bold;text-align:center;background: #c5c5c5;} th{line-height:30px;height:30px;} tfoot TR Td{background: #fff;line-height:26px;height:26px;} thead{border:1px solid #999;} thead tr Td{text-align:center;} #page {text-align:center;float:right;} #page A, #page a:visited{width:60px;height:22px;line-height:22px;border:1px black Solid;display:block;float:left; margin:0 3px;background: #c9c9c9; Text-decoration:none;} #page a:hover{background: #c1c1c1; text-decoration:none;} . Grayr {padding:2px;font-size:11px;background: #fff; float:right;} . Grayr a {padding:2px 5px;margin:2px;color: #000; text-decoration:none;; border:1px #c0c0c0 Solid;} . Grayr a:hover {color: #000; border:1px orange Solid;} . Grayr a:active {color: #000; background: #99ffff}. Grayr span.current {padding:2px 5px;font-weight:bold; margin:2px; Color: #303030; background: #fff; border:1px Orange solid; . Grayr span.disabled {padding:2px 5px;margin:2px;color: #797979; background: #c1c1c1; border:1px #c1c1c1 Solid;} </style> <script type= "Text/javascript" > <!--function SelectAll () {if (this.checked==true) { CheCkall (' Test '); else {clearall (' test '); } function Checkall (name) {var el = document.getelementsbytagname (' input '); var len = el.length; for (var i=0; i<len; i++) {if (el[i].type== "checkbox") && (El[i].name==name)) { El[i].checked = true; }} function ClearAll (name) {var el = document.getelementsbytagname (' input '); var len = el.length; for (var i=0; i<len; i++) {if (el[i].type== "checkbox") && (El[i].name==name)) { el[i].checked = false; }}--> </script> </pead> <body> <table> <caption> friendly form </caption> <thead> <tr> <th><input onclick= ' if (this.checked==true) {checkall (' Test ');} else {ClearAll (' Te St '); } "type=" checkbox "value=" "name=" Test "title=" all Select/Cancel "/></th> <th> name </th> <th> sex </th > <th> age </th> <th> birthday </th> <th> Address </th> <th> Tel </th> <th> Email </ th> <th> URL </th> </tr> </thead> <tbody id= "tab" > <tr> <td><input typ e= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </td> <td> man </td> <td>35< /TD> <td>1971/10/23</td> <td> shenzhen nanshan </td> <td>13612345678</td> <td> szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= " CheckBox "Value=" a "name=" test "/> </td> <td> Zhang Daquan </td> <td> man </td> <td>35</td > <td>1971/10/23</td> <td> shenzhen nanshan </td> <td>13612345678</td> <td> szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= " CheckBox "Value=" a "name=" test "/> </td> <td> Zhang Daquan</td> <td> men </td> <td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td > <td>13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </ Td> <td> men </td> <td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td> <td>13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </ tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </td> <td> men </td> <td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td> <td >13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= "checkbox" value= "a" NAMe= "Test"/> </td> <td> Zhang Daquan </td> <td> men </td> <td>35</td> <td>1971/ 10/23</td> <td> shenzhen Nanshan </td> <td>13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= "checkbox" Value= "a" name= " Test "/> </td> <td> Zhang Daquan </td> <td> men </td> <td>35</td> <TD>1971/10/23 </td> <td> shenzhen Nanshan </td> <td>13612345678</td> <td>szzdc@163.com</td> <td >http://www.zdc.com</td> </tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/& Gt </td> <td> Zhang Daquan </td> <td> men </td> <td>35</td> <td>1971/10/23</td > <td> shenzhen nanshan </td> <td>13612345678</td> <td>szzdc@163.com</td> <td>http ://www.zdc.com</td> </tr> <tr> <td≫<input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </td> <td> man </td> & lt;td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td> <td>13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td>< Input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </td> <td> man </td> <td& gt;35</td> <td>1971/10/23</td> <td> shenzhen nanshan </td> <td>13612345678</td> <td >szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </td> <td> men </td> <td>35& lt;/td> <td>1971/10/23</td> <td> shenzhen nanshan </td> <td>13612345678</td> <td> Szzdc@163.com</td> <td>http://www.zdc.com</TD> </tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/> </td> <td> wider All </td> <td> men </td> <td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td > <td>13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </ Td> <td> men </td> <td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td> <td>13612345678</td> <td>szzdc@163.com</td> <td>http://www.zdc.com</td> </ tr> <tr> <td><input type= "checkbox" Value= "a" name= "test"/> </td> <td> Zhang Daquan </td> <td> men </td> <td>35</td> <td>1971/10/23</td> <td> shenzhen Nanshan </td> <td >13612345678</td> <td>szzdc@163.com</TD> <td>http://www.zdc.com</td> </tr> </tbody> <tfoot> <tr> <td><i Nput onclick= ' if (this.checked==true) {checkall (' Test ');} else {clearall (' Test ');} "type=" checkbox "value=" "Name=" tes T "title=" SELECT/Cancel "/></td> <td colspan=" 8 "> <div class=" Grayr "><span class=" Disabled "> < & Lt;/span><span class= "current" >1</span>234567...199200 > </div> <!--<div id= "page" > First prev Next last </div>--> </td> </tr> </tfoot> </table> <script type= "Text/java Script > <!--var ptr=document.getelementbyid ("tab"). getElementsByTagName ("tr"); function $ () {for (i=1;i<ptr.length+1;i++) {ptr[i-1].classname = (i%2>0)? T1 ":" T2 "; }} window.onload=$; 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> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
