教程集 > 脚本编程 > javascript > 正文 js 控制表格隔行换色代码

js 控制表格隔行换色代码

发布时间：2023-06-04 编辑：jiaochengji.com

教程集为您提供js 控制表格隔行换色代码等资源，欢迎您收藏本站，我们将为您提供最新的js 控制表格隔行换色代码资源

提示：您可以先修改部分代码再运行

<!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>  <title>隔行换色的表格</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">  body{padding:0; margin:0; font:Arial; font-size:12px;}  .bf{padding:0; margin:auto;}  .bf table{text-align:center;line-height:14pt;}  .bf th{width:50px; padding:10px;}  .f1{background:#fff8f0;}  .f2{background:#f0f7ff;}  .f3{background:#f7f7f7;}  </style>  </head>  <body>    <div class="bf">    <table border="1" bordercolor="#00CCFF" cellspacing="0" >    <caption>年度收入2006-2009统计表</caption>      <tr class="b">        <th></th>        <th scope="col">2006年</th>        <th scope="col">2007年</th>        <th scope="col">2008年</th>        <th scope="col">2009年</th>      </tr>      <tr class="b"><th scope="row" rowspan="4">总</th></tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr class="b">        <th scope="row" rowspan="4">总</th>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr class="b">        <th scope="row" rowspan="4">总</th>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>      <tr>        <td>分</td>        <td>分</td>        <td>分</td>        <td>分</td>      </tr>    </table>  </div>  <script type="text/javascript">  var bg=document.getElementsByTagName('tr');  for(var i=0,j=0;i<bg.length;i  )  {      if(bg[i].className!='b')      {    j  ;          bg[i].className=j%2==0?'f1':'f2';          }      else      {bg[i].className='f3'}  }  </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript实现隔行变色函数代码一例
 JS控制表格隔行变色的实现代码
 js 隔行变色的最简单代码
 jQuery 表格隔行换色鼠标高亮行变色的实现代码
 js 隔行变色与鼠标悬停自动变色的实现代码
 Js表格隔行换色(隔行变色)代码一例
 js 隔行变色鼠标经过变色的代码
 jQuery 行背景颜色的交替显示(隔行变色)实现代码
 Js与Css结合实现表格隔行换色(隔行变色)的代码
 jQuery插件实现表格隔行换色且感应鼠标高亮行变色

上一篇：js em实现倒三角代替图片

[关闭]

js 控制表格隔行换色代码

最近更新

浏览排行