<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQuery Portlets drag layer css js ajax</title>
<style type="text/css">
<!--
table{
border-collapse:collapse;
width:79.5%;
text-align:left;
}
table th,table td{
padding:5px 10px;
border:1px #fff solid;
}
table thead{
Background-color:#999;
color:#fff;
}
table tbody tr.subhead{
background-color:#bbb;
}
table tbody tr.even{
background-color:#eee;
}
table tbody tr.odd{
background-color:#e4e4e4;
}
table tbody tr.highlight{
background-color:#ff6;
}
div.tooltip{
position:absolute;
z-index:2;
background:#efd;
border:1px solid #ccc;
padding:3px;
font-family:Verdana;
font-size:10px;
}
img{
margin-right:8px;
}
div.filter-column{
float:right;
width:20%;
}
div.filter-column h3{
margin:0 0 0 10px;
font-size:16px;
}
div.filter-column .filter{
margin:5px 0 0 10px;
line-height:24px;
padding:0 10px;
}
div.filter-column .active{
background:#efd;
border:1px solid #ccc;
}
.clickable{
cursor:pointer;
}
-->
</style>
<script type="text/javascript" src="script/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var rowIndex = 0;
var highlighted ="";
var column = 3;
var toggleMins = "images/iconopen.gif";
var togglePlus = "images/iconclose.gif";
var $subHead = $("tbody th:first-child");
$subHead.prepend("<img src='"+toggleMins+"' alt='collapse this section' />");
//折叠和扩展
$("img",$subHead).addClass("clickable").click(function(){
var toggleSrc = $(this).attr("src");
if(toggleSrc == toggleMins){
$(this).attr("src",togglePlus).parents("tr").siblings().fadeOut("fast");
}
else{
$(this).attr("src",toggleMins).parents("tr").siblings().not(".filtered").fadeIn("fast");
}
});
//定位工具提示条
var positionTooltip = function(event){
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 20;
$("div.tooltip").css({left:tPosX,top:tPosY});
};
//显示工具提示条
var showTooltip = function(event){
$("div.tooltip").remove();
var $thisTopic = $(this).text();
if($(this).parent().is(".highlight")){
highlighted = "un-";
}
else{
highlighted = ""
}
$("<div class='tooltip'>Click to " + highlighted + "highlight all topics written by " + $thisTopic + "</div>").appendTo("body");
positionTooltip(event);
};
//隐藏工具提示条
var hideTooltip = function(){
$("div.tooltip").remove();
};
//间隔换色
$("table.striped").each(function(){
$(this).bind("stripe",function(){
$("tbody tr:not(.filtered)",this).each(function(index){
if($("th",this).length){
$(this).addClass("subhead");
rowIndex = -1;
}
else{
if(rowIndex%4 < 2){
$(this).removeClass("odd").addClass("even");
}
else{
$(this).removeClass("even").addClass("odd");
}
}
rowIndex++;
});
});
$(this).trigger("stripe");
});
$("table.striped tbody tr").each(function(index){
$("td:nth("+column+")",this).addClass("clickable").click(function(){
var thisClicked = $(this).text();
$("table.striped tbody tr").each(function(){
if(thisClicked == $("td:nth("+column+")",this).text()){
$(this).addClass("highlight");
}
else{
$(this).removeClass("highlight");
}
});
showTooltip.call(this,event);
}).hover(showTooltip,hideTooltip).mousemove(positionTooltip);
});
$("table.striped").each(function(){
var $table = $(this);
$table.find("th").each(function(){
if($(this).is(".filter-column")){
var $filters = $("<div class='filter-column'><h3>Filter by " +$(this).text()+ ":</h3></div>");
var keywords = {};
$table.find("tbody tr td").filter(":nth-child(" + (column+1) + ")").each(function(){
keywords[$(this).text()] = $(this).text();
});
$("<div class='filter'>all</div>").click(function(){
$table.find("tbody tr").show().removeClass("filtered");
$(this).addClass("active").siblings().removeClass("active");
$("img","tbody tr th").attr("src",toggleMins);
$table.trigger("stripe");
}).addClass("clickable active").appendTo($filters);
$.each(keywords,function(index,keyword){
$("<div class='filter'></div>").text(keyword).bind("click",{"keyword":keyword},function(event){
$table.find("tbody tr").each(function(){
if($("td",this).filter(":nth-child(" + (column+1) + ")").text() == event.data["keyword"]){
$(this).removeClass("filtered").show();
}
else if($("th",this).length == 0){
$(this).addClass("filtered").hide();
}
});
$(this).addClass("active").siblings().removeClass("active");
$table.trigger("stripe");
}).addClass("clickable").appendTo($filters);
});
$filters.insertBefore($table);
}
});
});
});
</script>
</head>
<body>
<table class="striped">
<thead>
<tr>
<th>Date</th>
<th>Headline</th>
<th>Author</th>
<th class="filter-column">Topic</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">2007</th>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jquery Meetup</td>
<td>John Resig</td>
<td>conference</td>
</tr>
<tr>
<td>Feb 28</td>
<td>Jquery 1.1.2</td>
<td>John Resig</td>
<td>release</td>
</tr>
<tr>
<td>Feb 21</td>
<td>Jquery is OpenAjax Compliant</td>
<td>John Resig</td>
<td>standards</td>
</tr>
<tr>
<td>Feb 20</td>
<td>Jquery and Jack Slocum's Ext</td>
<td>John Resig</td>
<td>third-party</td>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jquery Meetup</td>
<td>John Resig</td>
<td>conference</td>
</tr>
<tr>
<td>Feb 28</td>
<td>Jquery 1.1.2</td>
<td>John Resig</td>
<td>release</td>
</tr>
<tr>
<td>Feb 21</td>
<td>Jquery is OpenAjax Compliant</td>
<td>John Resig</td>
<td>standards</td>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jquery Meetup</td>
<td>John Resig</td>
<td>conference</td>
</tr>
<tr>
<td>Feb 28</td>
<td>Jquery 1.1.2</td>
<td>John Resig</td>
<td>release</td>
</tr>
<tr>
<td>Feb 21</td>
<td>Jquery is OpenAjax Compliant</td>
<td>John Resig</td>
<td>standards</td>
</tr>
<tr>
<td>Feb 20</td>
<td>Jquery and Jack Slocum's Ext</td>
<td>John Resig</td>
<td>third-party</td>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jquery Meetup</td>
<td>John Resig</td>
<td>conference</td>
</tr>
<tr>
<td>Feb 28</td>
<td>Jquery 1.1.2</td>
<td>John Resig</td>
<td>release</td>
</tr>
<tr>
<td>Feb 21</td>
<td>Jquery is OpenAjax Compliant</td>
<td>John Resig</td>
<td>standards</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">2006</th>
</tr>
<tr>
<td>Dec 27</td>
<td>The path to 1.1</td>
<td>John Resig</td>
<td>source</td>
</tr>
<tr>
<td>Dec 18</td>
<td>Meet The People Behind jQuery</td>
<td>John Resig</td>
<td>announcement</td>
</tr>
<tr>
<td>Dec 13</td>
<td>Helping you understand jQuery</td>
<td>John Resig</td>
<td>tutorial</td>
</tr>
<tr>
<td>Dec 27</td>
<td>The path to 1.1</td>
<td>John Resig</td>
<td>source</td>
</tr>
<tr>
<td>Dec 18</td>
<td>Meet The People Behind jQuery</td>
<td>John Resig</td>
<td>announcement</td>
</tr>
<tr>
<td>Dec 13</td>
<td>Helping you understand jQuery</td>
<td>John Resig</td>
<td>tutorial</td>
</tr>
<tr>
<td>Mar 11</td>
<td>SXSWi jq
动态Javascript表格实例
4星 · 超过85%的资源 需积分: 9 155 浏览量
2009-02-19
11:13:07
上传
评论
收藏 40KB RAR 举报 
table.rar （5个子文件） 
table images 
iconclose.gif 73B
Thumbs.db 16KB iconopen.gif 67B script jquery-1.2.6.js 98KB
hightLight.html 10KB资源评论
fj1107112013-05-10对初学者是一个很好的资源
