jQuery之表常用操作

最新推荐文章于 2024-09-20 11:38:47 发布

iteye_18509

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量93

点赞数

文章标签： javascript ViewUI

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

效果图如下：

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

1 . 行条纹

Js代码

这段代码(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代码

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

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

3 .工具条提示

Js代码

varhighlighted="";
//定位工具提示条
varpositionTooltip=function(event){
vartPosX=event.pageX-5;
vartPosY=event.pageY+20;
$("div.tooltip").css({left:tPosX,top:tPosY});
};
//显示工具提示条
varshowTooltip=function(event){
$("div.tooltip").remove();
var$thisTopic=$(this).text();
if($(this).parent().is(".highlight")){//检查当前tr的样式是否是highlight
highlighted="un-";
}
else{
highlighted=""
}
$("<divclass='tooltip'>Clickto"+highlighted+"highlightalltopicswrittenby"+$thisTopic+"</div>").appendTo("body");
//给工具提示条增加内容，
//如果当前tr的样式是highlight，那么工具条的内容是：Clicktoun-highlightalltopicswrittenby$thisTopic;
//如果当前tr的样式不是highlight，那么工具条的内容是：Clicktohighlightalltopicswrittenby$thisTopic.
positionTooltip(event);
};
//隐藏工具提示条
varhideTooltip=function(){
$("div.tooltip").remove();
};

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

4 .折叠和扩展

Js代码

vartoggleMins="images/iconopen.gif";
vartogglePlus="images/iconclose.gif";
var$subHead=$("tbodyth:first-child");
$subHead.prepend("<imgsrc='"+toggleMins+"'alt='collapsethissection'/>");
$("img",$subHead).addClass("clickable").click(function(){
vartoggleSrc=$(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代码

$("table.striped").each(function(){
var$table=$(this);
$table.find("th").each(function(){
if($(this).is(".filter-column")){
//把样式为filter-column的div赋给变量$filters
var$filters=$("<divclass='filter-column'><h3>Filterby"+$(this).text()+":</h3></div>");
//把topic一列所有出现的过的关键字加到keywords数组
varkeywords={};
$table.find("tbodytrtd").filter(":nth-child("+(column+1)+")").each(function(){
keywords[$(this).text()]=$(this).text();
});
//在样式为filter-column的div加一个all按钮，显示所有的表格行
$("<divclass='filter'>all</div>").click(function(){
$table.find("tbodytr").show();
$(this).addClass("active").siblings().removeClass("active");
$("img","tbodytrth").attr("src",toggleMins);
}).addClass("clickableactive").appendTo($filters);
$.each(keywords,function(index,keyword){
$("<divclass='filter'></div>").text(keyword).bind("click",{"keyword":keyword},function(event){
$table.find("tbodytr").each(function(){
if($("td",this).filter(":nth-child("+(column+1)+")").text()==event.data["keyword"]){
$(this).show();
}
elseif($("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前
}
});
通过只向用户显示匹配给定条件的表格行，可以省去用户不必要的分心。