您的位置：首页 > Web前端 > JQuery

jQuery 对表格的简单操作

2012-08-20 10:43 274 查看



jQuery 对表格的简单操作

参考资料：
《锋利的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>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//页面初始化
$(function() {
//数据隔行变色效果
$("tbody > tr:odd").addClass("odd").next().addClass("even");

//初始化时第一行高亮
$("tbody > tr:eq(1)").addClass("data");

var preIndex = 0;	//记录前一次触发 click 事件的 <tr> 的索引
//为数据区的 <tr> 绑定 click 事件
$("tbody > tr:gt(0)").click(function() {
var currIndex = $("tbody > tr:gt(0)").index($(this));	//当前触发 click 事件的 <tr> 的索引
beginIndex = preIndex;		//设置起点索引
endIndex = currIndex;		//设置终点索引
millisec = 300 / Math.abs(endIndex - beginIndex);		//设置总执行时间为 300 毫秒
changeTr();	//高亮效果从起点索引移动至终点索引
preIndex = currIndex;	//为下一次 click 事件记录 preIndex
});
});

var millisec;		//高亮效果移动的时间间歇（毫秒）
var beginIndex;		//高亮效果的起点索引
var endIndex;		//高亮效果的终点索引
var timeId;	//延迟执行的 setTimeout() 的 Id

//高亮效果从起点索引移动至终点索引
function changeTr(){
if (beginIndex < endIndex) {
//高亮效果移至下一行
$("tbody > tr:gt(0):eq(" + (++beginIndex) + ")")
.addClass("data").siblings().removeClass("data");
timeId = setTimeout("changeTr()", millisec);
} else if (beginIndex > endIndex) {
//高亮效果移至上一行
$("tbody > tr:gt(0):eq(" + (--beginIndex)+ ")")
.addClass("data").siblings().removeClass("data");
timeId = setTimeout("changeTr()", millisec);
} else {
//当高亮效果移至终点索引时，取消延迟执行
clearTimeout(timeId);
}
}
</script>

<!-- CSS -->
<style type="text/css">
.odd {background: #b17af5;}		/* 奇数行背景色 */
.even {background: #06cf4a;}	/* 偶数行背景色 */
.data {background: #812671;}	/* 高亮行背景色 */
</style>
</head>

<!-- HTML -->
<body>
<table width="500px">
<thead>
<tr>
<td width="200px">姓名</td>
<td width="100px">性别</td>
<td width="200px">地址</td>
</tr>
</thead>
<tbody>
<tr><td colspan="3"><hr /></td></tr>
<tr>
<td>张三</td>
<td>男</td>
<td>列支敦士登</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>米兰</td>
</tr>
<tr>
<td>王老五</td>
<td>女</td>
<td>布雷西亚</td>
</tr>
<tr>
<td>郑贵妃</td>
<td>女</td>
<td>皮亚琴察</td>
</tr>
<tr>
<td>赫伯特·冯·卡拉扬</td>
<td>男</td>
<td>三汊镇</td>
</tr>
<tr>
<td>迈赫迪·查姆兰</td>
<td>男</td>
<td>土坝孜街道</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>列支敦士登</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>米兰</td>
</tr>
<tr>
<td>王老五</td>
<td>女</td>
<td>布雷西亚</td>
</tr>
<tr>
<td>郑贵妃</td>
<td>女</td>
<td>皮亚琴察</td>
</tr>
<tr>
<td>赫伯特·冯·卡拉扬</td>
<td>男</td>
<td>三汊镇</td>
</tr>
<tr>
<td>迈赫迪·查姆兰</td>
<td>男</td>
<td>土坝孜街道</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>列支敦士登</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>米兰</td>
</tr>
<tr>
<td>王老五</td>
<td>女</td>
<td>布雷西亚</td>
</tr>
<tr>
<td>郑贵妃</td>
<td>女</td>
<td>皮亚琴察</td>
</tr>
<tr>
<td>赫伯特·冯·卡拉扬</td>
<td>男</td>
<td>三汊镇</td>
</tr>
<tr>
<td>迈赫迪·查姆兰</td>
<td>男</td>
<td>土坝孜街道</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航