jQuery之表常用操作
2011-08-17 14:05
302 查看
就table的一些常用操作做了一个综合的例子,包括行条纹 高亮 工具条提示 扩展 折叠 筛选等效果。
效果图如下:
下面我把我写的例子拆分解释一下:
1 .
行条纹
Js代码
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代码
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代码
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代码
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)方法,[b]speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)[/b]
当表格中以分组的方式包含大量的数据时,如果能都折叠或者隐藏一部分表格的内容,就可以减少页面滚动,从而方便对表格中的所有数据进行更清晰地查看。
5 .筛选(Filter by Topic列)
Js代码
$("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前
}
});
通过只向用户显示匹配给定条件的表格行,可以省去用户不必要的分心。
效果图如下:
下面我把我写的例子拆分解释一下:
1 .
行条纹
Js代码
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代码
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代码
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代码
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)方法,[b]speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)[/b]
当表格中以分组的方式包含大量的数据时,如果能都折叠或者隐藏一部分表格的内容,就可以减少页面滚动,从而方便对表格中的所有数据进行更清晰地查看。
5 .筛选(Filter by Topic列)
Js代码
$("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前
}
});
通过只向用户显示匹配给定条件的表格行,可以省去用户不必要的分心。
相关文章推荐
- jQuery随手笔记之常用的jQuery操作DOM事件
- jQuery常用操作部分总结
- jQuery常用操作
- 最常用的jQuery操作checkbox方法
- 汇总常用的jQuery操作Table tr td方法
- JQuery表格操作的常用技巧总结
- jQuery 常用操作技巧
- jquery 常用操作
- jquery所有选择器,dom操作常用方法
- jQuery操作表格(table)的常用方法、技巧汇总
- jquery select 常用操作总结
- jquery 常见常用文档操作函数
- Jquery 操作html 不常用元素方法大全
- jquery的常用操作
- JQuery 常用DOM操作3
- JQuery常用操作实现方式
- jquery常用操作
- 160726、jQuery常用操作
- jquery常用操作小结