码迷,mamicode.com
首页 > Web开发 > 详细

jQuery对表单、表格的操作及更多应用(中:表格应用)

时间:2015-06-07 23:33:02      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

内容摘录自锋利的JQuery一书

二、表格应用

 

1 表格隔行变色(:odd:even选择器 P157) 

$(function(){
$("tr:odd").addClass("odd"); //奇数行添加样式
$("tr:even").addClass("even"); //偶数行添加样式(:odd和:even选择器中索引从0开始)
})

 

 2 设定含有指定文字内容的某一行变色(:contains选择器 P158) 

$(function(){
$("tr:contains(‘内容‘)").addClass("selected");
})

 

3 单选框控制表格行高亮(find()方法;:radio:checked:has选择器 P158) 

技术分享
//DOM如:<table><tr><td><input type="radio" /></td></tr>...</table>
$(function(){
$("tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected").end()
.find(":radio").attr("checked",true);
$("table :radio:checked").parent().parent().addClass("selected");
//初始化表格时如有单选框默认选中也需要处理
//也可写作$("table :radio:checked").parent("tr").addClass("selected");
//或者$("tbody>tr:has(:checked)").addClass("selected");
});
})
技术分享

 

4 复选框控制表格行高亮(:has选择器;使用hasClass()方法进行判断 P160) 

技术分享
$("tr:has(:checked)").addClass("selected"); //进入页面时,处理已被选中的表格行


$("tr").click(function(){
if ($(this).hasClass("selected")){ //判断是否含有此样式
$(this).removeClass("selected").find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected").find(":checkbox").attr("checked",true);
}
})
//上述代码可使用三元运算简化为:
$("tr").click(function(){
var hasSelected = $(this).hasClass("selected");
$(this)[hasSelected?"removeClass":"addClass"]("selected")
.find(":checkbox").attr("checked",!hasSelected);
//注:$(this)["addClass"]("selected");等价于$(this).addClass("selected");
})
技术分享

 

5 表格展开关闭(toggleClass()toggle()方法;属性技巧的使用 P161)
DOM如下:

技术分享
<table>
<tr class="parent" id="row_01"><td>标题1</td></tr>
<tr class="child_row_01"><td>内容1</td></tr>
<tr class="parent" id="row_02"><td>标题2</td></tr>
<tr class="child_row_02"><td>内容2</td></tr>
</table>
技术分享

 

$(function(){
$("tr.parent").click(function(){
$(this).toggleClass("selected").siblings(".child_" + this.id).toggle();
});
})

 

 6 表格内容筛选显示(filter()方法 P163) 

$(function(){
$("tr").hide().filter(":contains(‘李‘)").show();
})

 

 7 表格内容按输入筛选显示(P163) 

$(function(){
$("#filterName").keyup(function(){
$("tr").hide().filter(":contains(‘" + ($(this).val()) + "‘)").show();
}).keyup(); //DOM加载完时,绑定事件完成之后立即触发,避免在刷新页面后筛选效果消失
})

jQuery对表单、表格的操作及更多应用(中:表格应用)

标签:

原文地址:http://www.cnblogs.com/longshiyVip/p/4559477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!