JS控制table隔行变色

本文展示了中国各大城市的体育竞赛成绩排名,通过图表直观呈现了金牌、银牌、铜牌的数量,以及各城市在竞赛中的名次分布。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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";
        	}
   	 	}
	}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值