Table隔行变色
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; }
