table 隔列(行)换色效果让表格结构更清淅

2019-11-20 23:07:19

字体：大中小

来源：转载

供稿：网友

<!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> <script> window.onload = function(){ //returnColor("test"); setColor("test"); } function setColor(id) { var trs=document.getElementById(id).getElementsByTagName("tr"); for(var i=0; i<trs.length; i++) { var tds = trs[i].getElementsByTagName("td"); for(var j=0; j<tds.length; j++) { if(j%2==1) { tds[j].className="over"; } else { tds[j].className="out"; } } } } </script> </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需刷新才能执行]

上一篇：Web网页对话框可拖动、关闭(自动)文字循环变化

下一篇：iphone手机桌面滑动效果使用css3实现