Js 實現表格隔行換色一例

2019-11-21 01:00:01

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Js實現表格隔行換色一例</title> <style type="text/css"> body{ padding:0; margin:0; font:Arial; font-size:12px;} .bf{ padding:0; margin:auto;} .bf table{ text-align:center;line-height:14pt;} .bf th{ width:50px; padding:10px;} .f1{ background:#fff8f0;} .f2{ background:#f0f7ff;} .f3{ background:#f7f7f7;} </style> </head> <body> <div   id="iwvjtn8m0"   class="bf"> <table border="1" bordercolor="#00CCFF" cellspacing="0" > <caption>武林網歡迎你</caption> <tr class="b"> <th></th> <th scope="col">2006年</th> <th scope="col">2007年</th> <th scope="col">2008年</th> <th scope="col">2009年</th> </tr> <tr class="b"><th scope="row" rowspan="4">總</th></tr> <tr> <td>4</td> <td>2</td> <td>56</td> <td>43</td> </tr> <tr> <td>10</td> <td>4</td> <td>10</td> <td>10</td> </tr> <tr> <td>10</td> <td>76</td> <td>10</td> <td>9</td> </tr> <tr class="b"><th scope="row" rowspan="4">總</th></tr> <tr> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr> <td>2</td> <td>10</td> <td>12</td> <td>10</td> </tr> <tr> <td>10</td> <td>10</td> <td>10</td> <td>10</td> </tr> <tr class="b"><th scope="row" rowspan="4">總</th></tr> <tr> <td>10</td> <td>5</td> <td>10</td> <td>10</td> </tr> <tr> <td>10</td> <td>7</td> <td>10</td> <td>3</td> </tr> <tr> <td>10</td> <td>5</td> <td>7</td> <td>8</td> </tr> </table> </div> <script type="text/javascript"> var bg=document.getElementsByTagName('tr'); for(var i=0,j=0;i<bg.length;i++) { if(bg[i].className!='b') { j++; bg[i].className=j%2==0?'f1':'f2'; } else {bg[i].className='f3'} } </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：javascript實現的鼠標懸停時動態(tài)翻滾的導航條

下一篇：Javascript實現的CSS代碼高亮顯示