使用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使特定的表格隔行变色

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

利用Javascript实现隔行变色

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

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

表格.html 表格操作 全选 编号 编程语言 所属公司 市场份额 诞生日期 操作...

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

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

CSS2+JS实现table隔行变色

  • 2013-05-07 12:49
  • 301KB
  • 下载

jQuery实现表格隔行变色

隔行变色 在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局...

点击单选按钮 实现表格的隔行变色

/*定义了三个样式*/ .once{ background-color:#0FC; } .after{ background-color:#F00; } .selected...

多款jquery实现隔行换色、多选框选中变色【强大】

jquery实现隔行换色、多选框选中变色,效果还不错 多款jquery实现隔行换色、多选框选中变色 table{ border-collapse:collapse; ...

ajax+js+dom+json+php+mysql实现仿百度、google的分页隔行变色效果(加图片)

pading文件  include "../include/dbConn.php";  //几个关键的变量 当前页  总页数  每页大小  //定义当前页  if(isset($_GET[...

php简单分页 和 jquery实现超简单的隔行变色

无标题文档 $(document).ready(function (){ $("tr:even").css("background","#00FFFF"); $("tr:odd"...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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