资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
table 隔列(行)换色效果让表格结构更清淅
<!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>table 隔列换色效果</title> <style> #test{ background-color:#C96; text-align:center; line-height:2em;} .over{background-color:#fff;} .out{background-color:#F1F1F1;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0A%2F%2FreturnColor(%22test%22)%3B%20%0D%0AsetColor(%22test%22)%3B%20%0D%0A%7D%20%0D%0Afunction%20setColor(id)%20%0D%0A%7B%20%0D%0Avar%20trs%3Ddocument.getElementById(id).getElementsByTagName(%22tr%22)%3B%20%0D%0Afor(var%20i%3D0%3B%20i%3Ctrs.length%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0Avar%20tds%20%3D%20trs%5Bi%5D.getElementsByTagName(%22td%22)%3B%20%0D%0Afor(var%20j%3D0%3B%20j%3Ctds.length%3B%20j%2B%2B)%20%0D%0A%7B%20%0D%0Aif(j%252%3D%3D1)%20%0D%0A%7B%20%0D%0Atds%5Bj%5D.className%3D%22over%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Atds%5Bj%5D.className%3D%22out%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <table width="50%" border="0" cellspacing="1" cellpadding="0" id="test"> <tr> <td>0 </td> <td>1 </td> <td>2 </td> <td>18</td> </tr> <tr> <td>3 </td> <td>4 </td> <td>5 </td> <td>19</td> </tr> <tr> <td>6 </td> <td>7 </td> <td>8 </td> <td>20</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> <td>21</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>22</td> </tr> <tr> <td>15</td> <td>16</td> <td>17</td> <td>23</td> </tr> <tr> <td>27</td> <td>26</td> <td>25</td> <td>24</td> </tr> </table> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程