JS控制table隔行变色

来源：互联网发布：南方全站仪上传没数据编辑：程序博客网时间：2024/05/18 19:22

<table width="304" border="0" cellpadding="0" id="table1">      <tr>       <th>代表团</th>       <td><img src="images/ico_gold-.png" alt=""></td>       <td><img src="images/ico_silver-.png" alt=""></td>       <td><img src="images/ico_bronze-.png" alt=""></td>       <td>第四名</td>       <td>第五名</td>       <td>第六名</td>      </tr>      <tr>       <th>成都</th>       <td>99</td>       <td>86</td>       <td>43</td>       <td>61</td>       <td>15</td>       <td>24</td>      </tr>      <tr>       <th>北京</th>       <td>54</td>       <td>45</td>       <td>41</td>       <td>55</td>       <td>14</td>       <td>23</td>      </tr>      <tr>       <th>上海</th>       <td>52</td>       <td>35</td>       <td>35</td>       <td>49</td>       <td>13</td>       <td>22</td>      </tr>      <tr>       <th>深圳</th>       <td>49</td>       <td>34</td>       <td>26</td>       <td>25</td>       <td>12</td>       <td>19</td>      </tr>      <tr>       <th>合肥</th>       <td>42</td>       <td>31</td>       <td>24</td>       <td>16</td>       <td>11</td>       <td>18</td>      </tr>      <tr>       <th>沈阳</th>       <td>35</td>       <td>30</td>       <td>23</td>       <td>15</td>       <td>10</td>       <td>13</td>      </tr>      <tr>       <th>乌鲁木齐</th>       <td>33</td>       <td>27</td>       <td>20</td>       <td>13</td>       <td>09</td>       <td>12</td>      </tr>      <tr>       <th>厦门</th>       <td>31</td>       <td>24</td>       <td>18</td>       <td>12</td>       <td>08</td>       <td>11</td>      </tr>      <tr>       <th>香港</th>       <td>30</td>       <td>25</td>       <td>16</td>       <td>10</td>       <td>07</td>       <td>10</td>      </tr>      <tr>       <th>天津</th>       <td>16</td>       <td>15</td>       <td>13</td>       <td>08</td>       <td>06</td>       <td>03</td>      </tr>     </table>

table{}table th{ font-weight:bold; color:#0e89db; text-align:left; padding-left:10px;}table td{ padding:0 5px; }table tr{ height:23px; line-height:23px; text-align:center; overflow:hidden;}table tr img{ width:14px; height:18px; vertical-align:middle; _padding-bottom:2px;}table tr.bg{ background:url(../images/pic_result_hd.jpg) repeat-x;}

//第一行的背景色var Frow = document.getElementById("table1").rows[0].className="bg";//隔行变色var TbRow = document.getElementById("table1");if (TbRow != null){    for (var i=0;i<TbRow.rows.length ;i++ )    {        if (TbRow.rows[i].rowIndex%2==1)        {            TbRow.rows[i].style.backgroundColor="";        }        else        {            TbRow.rows[i].style.backgroundColor="#f4f4f4";        }    }}

0 0