使用javascript实现隔行变色

转载 2012年03月29日 19:39:34
<!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>使用JavaScript实现隔行变色</title>
    <style type="text/css">
           body{font-size:12px;text-align:center}
           #tbStu{width:260px;border:solid 1px #666;background-color:#eee}
           #tbStu tr{line-height:23px}
           #tbStu tr th{background-color:#ccc;color:#fff}
           #tbStu .trOdd{background-color:#fff}
    </style>
    <script type="text/javascript">
         window.onload=function(){
         var oTb=document.getElementById("tbStu");
         for(var i=0;i<oTb.rows.length-1;i++){
             if(i%2){
             oTb.rows[i].className="trOdd";
             }
           }
         }
    </script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
    <!--奇数行-->
    <tr>
      <td>1001</td><td>张小明</td><td>男</td><td>320</td>
    </tr>
    <!--偶数行-->
    <tr>
      <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
    </tr>
    <!--...-->
  </tbody>
</table>
</body>
</html>

利用Javascript实现隔行变色

new document .back{ background:#005aa0; } /** * 隔行变色 */ function change()...

使用javascript使特定的表格隔行变色

特定的表格隔行变色 (1)根据表格的id获取表格。 (2)在表格内获取元素。 (3)在元素下获取元素。 (4)循环输出获取的元素。 (5)对元素的索引值除以2并取模,...

使用原生js和jQuery实现表格的隔行变色

原生js实现表格隔行变色:利用原生js操作DOM元素 HTML: 1. 使用节点树方式实现表格偶数行变色 ...

javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)

表格.html 表格操作 全选 编号 编程语言 所属公司 市场份额 诞生日期 操作...
  • a125138
  • a125138
  • 2012年08月16日 19:51
  • 8083

javascript 小练习:隔行变色、错误处理

写下两个JS应用的小例子,隔行变色和错误处理。 灵感:codeforces的用例展示,隔行换色 看见那个黑白相间的背景,尝试着使用JS来练习着写一写。 就是%2的简单应用: win...

javascript表格操作大全:表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。(IE、火狐都兼容)

表格.html [javascript] view plain copy  print? "-//W3C//DTD XHTML 1.0 Transit...

CSS2+JS实现table隔行变色

  • 2013年05月07日 12:49
  • 301KB
  • 下载

用bootstrap实现表格隔行变色,hover 变色并在需要时出现滚动条

边框表格布局 名称 城市 密码...

jQuery实现table隔行换色和鼠标经过变色

一、隔行换色 [javascript] view plaincopy $("tr:odd").css("background-color","#eeeeee");  $("tr...

jquery实现隔行变色效果

简单各行变色 //使用jquery加载事件 $(document).ready(function (){ var oldcolor; $("tr").each(function (index,...
  • Oo__YAN
  • Oo__YAN
  • 2012年03月20日 21:02
  • 700
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用javascript实现隔行变色
举报原因:
原因补充:

(最多只允许输入30个字)