table表格的常用功能

就table的一些常用操作做了一个综合的例子，包括行条纹 高亮 工具条提示 扩展 折叠 筛选等效果。

 

效果图如下：

 

 

 

下面我把我写的例子拆分解释一下：

 

1 . 行条纹

var rowIndex = 0;
$("tbody tr").each(function(index){
	if($("th",this).length){//检查当前行是否包含th元素
		$(this).addClass("subhead");
		rowIndex = -1;
	}
       else{
               if(rowIndex%4 < 2){
	                  $(this).removeClass("odd").addClass("even");//为奇数组添加even样式
               }
               else{
	                  $(this).removeClass("even").addClass("odd");//为偶数组添加odd样式
               }
        }
        rowIndex++;	
)};

这段代码(rowIndex%4 < 2)是两行一组交替换色。

如果是三行一组交替换色，就是rowIndex%6 < 3,...依次类推。

通常情况下我们用到最多的是隔行换色，比这个两行一组交替换色要简单。

jquery提供了方法：

:even ： 匹配所有索引值为偶数的元素，从 0 开始计数。例如$("tr:even")；

:odd：匹配所有索引值为奇数的元素，从 0 开始计数。例如$("tr:odd")。

或者用:nth-child(index)：匹配其父元素下的第N个子或奇偶元素，从1开始计数。例如(":nth-child(2)"偶数行)

 

2 .高亮（突出显示行）

var column = 3;
$("table.striped tbody tr").each(function(index){
	$("td:nth("+column+")",this).addClass("clickable").click(function(){
		var thisClicked = $(this).text();//把当前单击的td标签内容赋给变量
		$("table.striped tbody tr").each(function(){//遍历tbody里的所有tr标签	
		        if(thisClicked == $("td:nth("+column+")",this).text()){//检查tbody当前列里是否有和单击的td标签内容匹配的td
			        $(this).addClass("highlight");
			}
			else{
				$(this).removeClass("highlight");
			}
		});
	})	
}); 

这段代码可以增强表格的视觉效果，是基于用户的交互突出显示相关的行。

 

3 .工具条提示

var highlighted ="";
//定位工具提示条
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")){//检查当前tr的样式是否是highlight
		highlighted = "un-";	
	}
	else{
		highlighted = ""		
	}
	$("<div class='tooltip'>Click to " + highlighted + "highlight all topics written by " + $thisTopic + "</div>").appendTo("body");
       //给工具提示条增加内容，
       //如果当前tr的样式是highlight，那么工具条的内容是：Click to un-highlight all topics written by $thisTopic;
       //如果当前tr的样式不是highlight，那么工具条的内容是：Click to highlight all topics written by $thisTopic.
       positionTooltip(event);
};
//隐藏工具提示条
var hideTooltip = function(){
	$("div.tooltip").remove();
};

  尽管行突出效果是一种很有用的特性，但就目前来讲，这些特性存在与否对用户而言并不明显。尽管我们可以为所有要单击的标签添加clickable类，使鼠标悬停在这些标签上时，光标变成手的形状。当用户仍然无从知晓单击这个标签会发生什么事情。为此，进一步添加与单击会发生的情况有关的说明是必要的。

4 .折叠和扩展

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");		
	}
});

这里用了fadeIn(speed) 和fadeOut(speed)方法，speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

当表格中以分组的方式包含大量的数据时，如果能都折叠或者隐藏一部分表格的内容，就可以减少页面滚动，从而方便对表格中的所有数据进行更清晰地查看。

 

5 .筛选(Filter by Topic列)

$("table.striped").each(function(){
	var $table = $(this);
	$table.find("th").each(function(){
		if($(this).is(".filter-column")){
               //把样式为filter-column的div赋给变量$filters
               var $filters = $("<div class='filter-column'><h3>Filter by " +$(this).text()+ ":</h3></div>");	
               //把topic一列所有出现的过的关键字加到keywords数组
               var keywords = {};
		$table.find("tbody tr td").filter(":nth-child(" + (column+1) + ")").each(function(){
			keywords[$(this).text()] = $(this).text();
		});
               //在样式为filter-column的div加一个all按钮，显示所有的表格行		
	        $("<div class='filter'>all</div>").click(function(){
			$table.find("tbody tr").show();
			$(this).addClass("active").siblings().removeClass("active");
			$("img","tbody tr th").attr("src",toggleMins);
		}).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).show();
				}
				else if($("th",this).length == 0){
					$(this).hide();
				}
			});	
			$(this).addClass("active").siblings().removeClass("active");				
			}).addClass("clickable").appendTo($filters);//把内容为keywords样式为filter的div加入到样式为filter-column的div里
             });
            $filters.insertBefore($table);//把样式为filter-column的div插入到table前
       }
});			

 通过只向用户显示匹配给定条件的表格行，可以省去用户不必要的分心。

 

可以看看附件的运行效果

• 
• 大小: 155.9 KB

• table.rar (40 KB)
• 下载次数: 4346

• 查看图片附件

分享到：

jquery学习之—构建功能型表单（一） | HTTP1.1协议中文版-RFC2616

• 2008-12-06 14:21
• 浏览 2860
• 评论(35)
• 论坛回复 / 浏览 (24 / 37727)
• 查看更多

评论

35 楼 guji528 2009-08-17  

功能很强啊！
js的东西看得真是挺晕的。

34 楼 jetyou 2009-07-27  

你做的？呵呵,哈哈

33 楼 yaolifei 2009-07-15  

maike 写道

刚看了下，要是有排序就更好

有一个tablesort插件，就是用来排序的

32 楼 yaolifei 2009-07-15  

点折叠的时候，第一次不起作用，第二次才开始有用，有的地方折叠和展开反掉了，请检查一下

31 楼 googh 2009-07-15  

IE6 要点2次 ，才能折叠

30 楼 long546324 2009-03-21  

学习一下

29 楼 ice-cream 2009-03-18  

hanjs 写道

lz,为何我用ie7,在点 topic 的时候进行高亮显示的时候有脚本错误.无法再取消高亮了.

call()函数出了问题，去掉就好了

28 楼 hanjs 2009-03-18  

lz,为何我用ie7,在点 topic 的时候进行高亮显示的时候有脚本错误.无法再取消高亮了.

27 楼 zhdsh1979 2009-02-07  

学习一下，谢谢啊

26 楼 xo_knight 2009-01-29  

其实在jquery基础教程那本书里第七章有个很相似的例子。。。

25 楼 edielei 2009-01-24  

楼主好厉害。佩服！

24 楼 shouzhi2007 2009-01-21  

好东西，学习一下

23 楼 jieyee 2009-01-16  

ebeach 写道

看着眼熟，好像都是《JQuery基础教程》里的东东

I agree

22 楼 nighthawk 2008-12-31  

非常不错，
不过“折叠”功能在IE7下有个小小的BUG，第一次进入页面的时候点“-”号得点2次才能折叠，alert一下toggleSrc，应该是图片路径的问题。在firefox和chrome下无此问题。

21 楼 daoyongyu 2008-12-24  

学习下。正在学习JQuery

20 楼 rk1982 2008-12-22  

有一定收藏价值，歇歇了。

19 楼 jiangshaolin 2008-12-19  

firefox下,有点问题,高亮条纹没出来.

18 楼 flysunsystem 2008-12-19  

挺不错啊。不知道，是否考虑过拖拽？和内容很多的情况啊？

17 楼 siashuayongsheng 2008-12-19  

谢谢了，好东西大学分

16 楼 kenbli 2008-12-18  

好東西，學習，學習~~!

« 上一页 1 2 下一页 »