资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
Js 实现表格隔行换色一例
<!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 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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20bg%3Ddocument.getElementsByTagName('tr')%3B%20%0D%0Afor(var%20i%3D0%2Cj%3D0%3Bi%3Cbg.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aif(bg%5Bi%5D.className!%3D'b')%20%0D%0A%7B%20j%2B%2B%3B%20%0D%0Abg%5Bi%5D.className%3Dj%252%3D%3D0%3F'f1'%3A'f2'%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7Bbg%5Bi%5D.className%3D'f3'%7D%20%0D%0A%0D%0A%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程