Table隔行变色

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_30469895

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量243

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/feifeishi/p/5959682.html

版权

1.用JavaScript实现隔行变色

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<style type="text/css">
body{
font-size: 12px;
text-align: center;
}
#tbStu{
widows: 200px;
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 src="js/jquery.js"></script>    
<script type="text/javascript">
window.onload=function(){
var oTb=document.getElementById("tbStu")
    for(var i=0;i<oTb.rows.length;i++)    {
        if(i%2){
            oTb.rows[i].className="trOdd";
        }
    }
}
</script>
  </head>
  
  <body>
  <table id="tbStu" cellpadding="10" cellspacing="0">
      <tbody>
          <tr>
              <th>学号</th><th>姓名</th>
          </tr>
          <tr>
              <td>1001</td><td>张三</td>
          </tr>
          <tr>
              <td>1002</td><td>李四</td>
          </tr>
          <tr>
              <td>1003</td><td>王五</td>
          </tr>
          <tr>
              <td>1004</td><td>赵六</td>
          </tr>
          <tr>
              <td>1002</td><td>姓名</td>
          </tr>
          
          
      </tbody>
  </table>
  </body>
</html>

2.用jQuery实现隔行变色

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<style type="text/css">
body{
font-size: 12px;
text-align: center;
}
#tbStu{
widows: 200px;
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 src="js/jquery.js"></script>    
<script type="text/javascript">
$(function(){
    $("#tbStu tr:nth-child(even)").addClass("trOdd");      //$("#tbStu tr:nth-child(odd)").css("background-color","red");
})
</script>
  </head>
  
  <body>
  <table id="tbStu" cellpadding="10" cellspacing="0">
      <tbody>
          <tr>
              <th>学号</th><th>姓名</th>
          </tr>
          <tr>
              <td>1001</td><td>张三</td>
          </tr>
          <tr>
              <td>1002</td><td>李四</td>
          </tr>
          <tr>
              <td>1003</td><td>王五</td>
          </tr>
          <tr>
              <td>1004</td><td>赵六</td>
          </tr>
          <tr>
              <td>1002</td><td>姓名</td>
          </tr>
          
          
      </tbody>
  </table>
  </body>
</html>

3.结果截图

4.其实用css就可实现，感觉更将单，推荐

    tr:nth-of-type(even){
    background-color:#F3F3F3 ;
    }
    tr:nth-of-type(odd) td{//无td 包括表头，有td 不包括表头
    background-color:red;
    }

转载于:https://www.cnblogs.com/feifeishi/p/5959682.html

weixin_30469895

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Table隔行变色

1.用JavaScript实现隔行变色<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.g...
复制链接

扫一扫