首页 > 代码库 > Table隔行变色

Table隔行变色

2024-08-16 14:35:21   218人阅读

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=http://www.mamicode.com/"<%=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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"<%=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=http://www.mamicode.com/"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=http://www.mamicode.com/"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.结果截图

技术分享

 

Table隔行变色


联系
我们