table 隔行变色
2013-10-26 00:23
253 查看
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="cp" value="${pageContext.request.contextPath}" ></c:set> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> table{border:0;margin:0;border-collapse:collapse;border-spacing:0;} td { border:1px solid green; } .red{background-color: red;} .gray{background-color: gray;} </style> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="${cp}/js/jquery-1.7.2.js"></script> <script type="text/javascript" src="${cp}/js/table.js"></script> </head> <body> <table> <tbody> <tr> <td>单行1</td> <td>单行2</td> <td>单行3</td> </tr> <tr> <td>双行1</td> <td>双行2</td> <td>双行3</td> </tr> <tr> <td>单行1</td> <td>单行2</td> <td>单行3</td> </tr> <tr> <td>双行1</td> <td>双行2</td> <td>双行3</td> </tr> <tr> <td>单行1</td> <td>单行2</td> <td>单行3</td> </tr> <tr> <td>双行1</td> <td>双行2</td> <td>双行3</td> </tr> </tbody> </table> </body> </html>
$(document).ready(function(){ $("tr:even").addClass("gray"); });
相关文章推荐
- jquery实现table表的隔行变色功能
- jQuery实现table表格隔行换色鼠标经过变色
- jQuery实现table表格隔行换色鼠标经过变色
- js实现table列表中的隔行变色
- DOM table 隔行变色
- CSS3 设置 Table 隔行变色
- css 实现table 隔行变色
- table 隔行变色
- table隔行变色
- Table 隔行变色、悬停变色
- table隔行变色的css
- table表格的相关设置(边框合并、隔行变色、添加内边框、单独设置某一列)
- Table表格的隔行变色,高亮选择当前行效果
- 关于table的td和ul元素li隔行变色的功能实现
- so easy-table添加双击事件和隔行变色
- javascript table 隔行变色
- DBGridEh 隔行变色
- 模拟Jquery addClass() removeClass() 并应用于隔行变色 高亮当前行
- 隔行变色的表格(altColorTable)
- 纯JS代码实现隔行变色鼠标移入高亮