[转]table表格的常用功能

转自：http://www.javaeye.com/topic/288115

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

效果图如下：

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

1 . 行条纹

Js代码

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

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 .高亮（突出显示行）

Js代码

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

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 .工具条提示

Js代码

1. var highlighted ="";   
2. //定位工具提示条   
3. var positionTooltip = function(event){   
4.     var tPosX = event.pageX - 5;   
5.     var tPosY = event.pageY + 20;   
6.      $("div.tooltip").css({left:tPosX,top:tPosY});   
7. };   
8. //显示工具提示条   
9. var showTooltip = function(event){   
10.      $("div.tooltip").remove();   
11.     var $thisTopic = $(this).text();   
12.     if($(this).parent().is(".highlight")){//检查当前tr的样式是否是highlight   
13.          highlighted = "un-";       
14.      }   
15.     else{   
16.          highlighted = ""           
17.      }   
18.      $("<div class='tooltip'>Click to " + highlighted + "highlight all topics written by " + $thisTopic + "</div>").appendTo("body");   
19.        //给工具提示条增加内容，   
20.        //如果当前tr的样式是highlight，那么工具条的内容是：Click to un-highlight all topics written by $thisTopic;   
21.        //如果当前tr的样式不是highlight，那么工具条的内容是：Click to highlight all topics written by $thisTopic.   
22.         positionTooltip(event);   
23. };   
24. //隐藏工具提示条   
25. var hideTooltip = function(){   
26.      $("div.tooltip").remove();   
27. };  

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 .折叠和扩展

Js代码

1. var toggleMins = "images/iconopen.gif";   
2. var togglePlus = "images/iconclose.gif";   
3. var $subHead = $("tbody th:first-child");   
4. $subHead.prepend("<img src='"+toggleMins+"' alt='collapse this section' />");   
5. $("img",$subHead).addClass("clickable").click(function(){   
6.     var toggleSrc = $(this).attr("src");   
7.     if(toggleSrc == toggleMins){   
8.          $(this).attr("src",togglePlus).parents("tr").siblings().fadeOut("fast");       
9.      }   
10.     else{   
11.          $(this).attr("src",toggleMins).parents("tr").siblings().not(".filtered").fadeIn("fast");           
12.      }   
13. });  

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列)

Js代码

1. $("table.striped").each(function(){   
2.     var $table = $(this);   
3.      $table.find("th").each(function(){   
4.         if($(this).is(".filter-column")){   
5.                //把样式为filter-column的div赋给变量$filters   
6.                var $filters = $("<div class='filter-column'><h3>Filter by " +$(this).text()+ ":</h3></div>");     
7.                //把topic一列所有出现的过的关键字加到keywords数组   
8.                var keywords = {};   
9.          $table.find("tbody tr td").filter(":nth-child(" + (column+1) + ")").each(function(){   
10.              keywords[$(this).text()] = $(this).text();   
11.          });   
12.                //在样式为filter-column的div加一个all按钮，显示所有的表格行        
13.              $("<div class='filter'>all</div>").click(function(){   
14.              $table.find("tbody tr").show();   
15.              $(this).addClass("active").siblings().removeClass("active");   
16.              $("img","tbody tr th").attr("src",toggleMins);   
17.          }).addClass("clickable active").appendTo($filters);   
18.                   
19.                 $.each(keywords,function(index,keyword){   
20.              $("<div class='filter'></div>").text(keyword).bind("click",{"keyword":keyword},function(event){   
21.                      $table.find("tbody tr").each(function(){   
22.                 if($("td",this).filter(":nth-child(" + (column+1) + ")").text() == event.data["keyword"]){   
23.                      $(this).show();   
24.                  }   
25.                 else if($("th",this).length == 0){   
26.                      $(this).hide();   
27.                  }   
28.              });   
29.              $(this).addClass("active").siblings().removeClass("active");                   
30.              }).addClass("clickable").appendTo($filters);//把内容为keywords样式为filter的div加入到样式为filter-column的div里   
31.               });   
32.              $filters.insertBefore($table);//把样式为filter-column的div插入到table前   
33.         }   
34. });           

$("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)
• 下载次数: 126