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

编程语言 Javascript

<!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需刷新才能执行]

总评分

共 0 位简友打分

简友评价

快来发表你的看法吧(〃'▽'〃)

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

中独太深 ·

5 分 0 评论

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

同类型推荐

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

js实现花俏的转动、旋转之后慢慢张开的窗口特效

基于jQuery实现下拉收缩(展开与折叠)特效

js实现运动logo图片效果及运动元素对象sportBox使用方法

JS实现简洁(隔行换色、高亮显示)表格特效

js实现类似光照的炫彩文字渐变视觉冲击效果

JavaScript实现渐变色效果(不使用图片)

CSS3实现3D文字动画效果

CSS定义Hover实现文字变大的超级链接

jQuery实现拉动页面固定顶部显示且自动消失(火狐)

点击文字链接弹出确认框基于js Confirm实现

css实现会折叠、展开的菜单导航栏效果

JS模拟抽奖序效果实现代码

js点击弹出div层实现可拖曳的弹窗效果

js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

JS实现用键盘控制DIV上下左右+放大缩小与变色

jQuery-serialize()输出序列化form表单值的方法

JavaScript中json对象和string对象之间相互转化

window.open以post方式将内容提交到新窗口

js鼠标滑过弹出层的定位IE6bug解决办法

推荐阅读

操作确认

提示