- <html>
- <head>
- <title>Member List</title>
- <style>
- <!--
- .datalist{
- border:1px solid #0058a3;
- font-family:Arial;
- border-collapse:collapse;
- background-color:#eaf5ff;
- font-size:14px;
- }
- .datalist caption{
- padding-bottom:5px;
- font:bold 1.4em;
- text-align:left;
- }
- .datalist th{
- border:1px solid #0058a3;
- background-color:#4bacff;
- color:#FFFFFF;
- font-weight:bold;
- padding-top:4px; padding-bottom:4px;
- padding-left:12px; padding-right:12px;
- text-align:center;
- }
- .datalist td{
- border:1px solid #0058a3;
- text-align:left;
- padding-top:4px; padding-bottom:4px;
- padding-left:10px; padding-right:10px;
- }
- .datalist tr:hover, .datalist tr.altrow{
- background-color:#c4e4ff;
- -->
- </style>
- </head>
- <body>
- <table class="datalist" summary="list of members in EE Studay">
- <caption>Member List</caption>
- <tr>
- <th scope="col">Name</th>
- <th scope="col">Class</th>
- <th scope="col">Birthday</th>
- <th scope="col">Constellation</th>
- <th scope="col">Mobile</th>
- </tr>
- <tr>
- <td>isaac</td>
- <td>W13</td>
- <td>Jun 24th</td>
- <td>Cancer</td>
- <td>1118159</td>
- </tr>
- <tr>
- <td>girlwing</td>
- <td>W210</td>
- <td>Sep 16th</td>
- <td>Virgo</td>
- <td>1307994</td>
- </tr>
- <tr>
- <td>tastestory</td>
- <td>W15</td>
- <td>Nov 29th</td>
- <td>Sagittarius</td>
- <td>1095245</td>
- </tr>
- <tr>
- <td>lovehate</td>
- <td>W47</td>
- <td>Sep 5th</td>
- <td>Virgo</td>
- <td>6098017</td>
- </tr>
- <tr>
- <td>slepox</td>
- <td>W19</td>
- <td>Nov 18th</td>
- <td>Scorpio</td>
- <td>0658635</td>
- </tr>
- <tr>
- <td>smartlau</td>
- <td>W19</td>
- <td>Dec 30th</td>
- <td>Capricorn</td>
- <td>0006621</td>
- </tr>
- <tr>
- <td>whaler</td>
- <td>W19</td>
- <td>Jan 18th</td>
- <td>Capricorn</td>
- <td>1851918</td>
- </tr>
- <tr>
- <td>shenhuanyan</td>
- <td>W25</td>
- <td>Jan 31th</td>
- <td>Aquarius</td>
- <td>0621827</td>
- </tr>
- <tr>
- <td>tuonene</td>
- <td>W210</td>
- <td>Nov 26th</td>
- <td>Sagittarius</td>
- <td>0091704</td>
- </tr>
- <tr>
- <td>ArthurRivers</td>
- <td>W91</td>
- <td>Feb 26th</td>
- <td>Pisces</td>
- <td>0468357</td>
- </tr>
- <tr>
- <td>reconzansp</td>
- <td>W09</td>
- <td>Oct 13th</td>
- <td>Libra</td>
- <td>3643041</td>
- </tr>
- <tr>
- <td>linear</td>
- <td>W86</td>
- <td>Aug 18th</td>
- <td>Leo</td>
- <td>6398341</td>
- </tr>
- <tr>
- <td>laopiao</td>
- <td>W41</td>
- <td>May 17th</td>
- <td>Taurus</td>
- <td>1254004</td>
- </tr>
- <tr>
- <td>dovecho</td>
- <td>W19</td>
- <td>Dec 9th</td>
- <td>Sagittarius</td>
- <td>1892013</td>
- </tr>
- <tr>
- <td>shanghen</td>
- <td>W42</td>
- <td>May 24th</td>
- <td>Gemini</td>
- <td>1544254</td>
- </tr>
- <tr>
- <td>venessawj</td>
- <td>W45</td>
- <td>Apr 1st</td>
- <td>Aries</td>
- <td>1523753</td>
- </tr>
- <tr>
- <td>lightyear</td>
- <td>W311</td>
- <td>Mar 23th</td>
- <td>Aries</td>
- <td>1002908</td>
- </tr>
- </table>
- <script language="javascript">
- var rows = document.getElementsByTagName('tr');//获取所有表格行
- for (var i=0;i<rows.length;i++){//然后对其遍历
- rows[i].onmouseover = function(){
- this.className += 'altrow';//鼠标经过时,显示样式altrow,注意,js中的样式是className而不是class,这个是新手容易犯的错误;
- }
- rows[i].onmouseout = function(){
- this.className = this.className.replace('altrow','');//鼠标一走的时候,把样式也去掉
- }
- }
- </script>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/221120137419.html
来源: http://www.codesnippet.cn/detail/221120137419.html