jQuery 表格应用：隔行变色，展开关闭，内容筛选
应用一：表格隔行变色
html
一、普通的隔行变色：jquery
须要用到的 APIide
$(':odd') --> 匹配全部索引值为奇数的元素，从0开始计数
this
$(':even') --> 匹配全部索引值为偶数的元素，从0开始计数spa
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
th, td{
width:100px;
border:1px solid #ddd;
text-align:center;
}
.even{background:#fff38f;}
.odd{background:#ffe;}
.selected{background:#ae0;}
</style>
</head>
<body>
<div>
筛选：<input type="text" id="#filterName">
</div>
<table>
<thead>
<tr>
<th>下单时间</th>
<th>产品名称</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>2013-04-26</td>
<td>海尔电冰箱</td>
<td>3688</td>
</tr>
<tr>
<td>2014-11-11</td>
<td>格力空调</td>
<td>5689</td>
</tr>
<tr>
<td>2015-01-14</td>
<td>美的电饭煲</td>
<td>452</td>
</tr>
<tr>
<td>2016-08-26</td>
<td>小米净化器</td>
<td>2258</td>
</tr>
<tr>
<td>2016-12-12</td>
<td>苹果6 plus</td>
<td>5688</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
//隔行变色
$('tbody>tr:odd').addClass('odd');
$('tbody>tr:even').addClass('even');
//某一行变为高亮显示状态
$('tr:contains("下单")').addClass('selected')
})
</script>
</body>
</html>
页面效果：插件
二、单选按钮控制表格行高亮orm
须要用到的APIhtm
end( ) --> 回到最近的一个“破坏性”操做以前，即，将匹配的元素列表变为前一次的状态blog
:checked --> 匹配全部选中的被选中元素（复选框、单选按钮等，不包括select 中的option）索引
$( ':radio' ) --> 匹配全部单选按钮
:has( selector ) --> 用于筛选选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
th, td{
width:100px;
border:1px solid #ddd;
text-align:center;
}
.even{background:#fff38f;}
.odd{background:#ffe;}
.selected{background:#ae0;}
</style>
</head>
<body>
<div>
筛选：<input type="text" id="#filterName">
</div>
<table>
<thead>
<tr>
<th></th>
<th>下单时间</th>
<th>产品名称</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" checked></td>
<td>2013-04-26</td>
<td>海尔电冰箱</td>
<td>3688</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>2014-11-11</td>
<td>格力空调</td>
<td>5689</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>2015-01-14</td>
<td>美的电饭煲</td>
<td>452</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>2016-08-26</td>
<td>小米净化器</td>
<td>2258</td>
</tr>
<tr>
<td><input type="radio"></td>
<td>2016-12-12</td>
<td>苹果6 plus</td>
<td>5688</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
//点击行变色
$('tbody>tr').click(function(){
$(this).addClass('selected').siblings('.selected').removeClass('selected').end() //切换点击变色
.find(':radio').attr('checked',true).end() //点到一行的同时让对应的单选框选中
.siblings().find(':radio').attr('checked',false); //其余行的单选框取消选中
});
//默认选中的行变色
$('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</body>
</html>
页面效果：
三、复选框控制表格高亮
重点注意：三目运算在选择器中的用法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
th, td{
width:100px;
border:1px solid #ddd;
text-align:center;
}
.even{background:#fff38f;}
.odd{background:#ffe;}
.selected{background:#ae0;}
</style>
</head>
<body>
<div>
筛选：<input type="text" id="#filterName">
</div>
<table>
<thead>
<tr>
<th></th>
<th>下单时间</th>
<th>产品名称</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" checked></td>
<td>2013-04-26</td>
<td>海尔电冰箱</td>
<td>3688</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2014-11-11</td>
<td>格力空调</td>
<td>5689</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2015-01-14</td>
<td>美的电饭煲</td>
<td>452</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2016-08-26</td>
<td>小米净化器</td>
<td>2258</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2016-12-12</td>
<td>苹果6 plus</td>
<td>5688</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
//点击行变色
$('tbody>tr').click(function(){
//判断当前是否选中 -> boolean
var hasSelected = $(this).hasClass('selected');
//若是选中，则移除 selected 类，不然就加上 selected。使用三目运算
$(this)[hasSelected?'removeClass':'addClass']('selected')
//查找当前行内的 checkbox 属性，选中则去掉，未勾选则选中
.find(':checked').attr('checked',!hasSelected);
});
//默认选中的行变色
$('tbody>tr:has(:checked)').addClass('selected');
})
</script>
</body>
</html>
效果：
应用二：表格展开/关闭
须要用到的API
toggleClass( ) --> 若是存在，就删除一个类；若是不存在，就添加一个类
toggle([speed],[easing],[fn]) --> 若是元素是可见的，切换为隐藏的；若是元素是隐藏的，切换为可见的。
1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件能够恢复此功能。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
th, td{
width:100px;
border:1px solid #ddd;
text-align:center;
}
.even{background:#fff38f;}
.odd{background:#ffe;}
.selected{background:#ae0;}
</style>
</head>
<body>
<div>
筛选：<input type="text" id="#filterName">
</div>
<table>
<thead>
<tr>
<th>下单时间</th>
<th>产品名称</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">你们电系列</td></tr>
<tr class="child_row_01">
<td>2013-04-26</td>
<td>海尔电冰箱</td>
<td>3688</td>
</tr>
<tr class="child_row_01">
<td>2014-11-11</td>
<td>格力空调</td>
<td>5689</td>
</tr>
<tr class="child_row_01">
<td>2015-01-14</td>
<td>美的电饭煲</td>
<td>452</td>
</tr>
<tr class="parent" id="row_02"><td colspan="3">小家电系列</td></tr>
<tr class="child_row_02">
<td>2016-08-26</td>
<td>小米净化器</td>
<td>2258</td>
</tr>
<tr class="child_row_02">
<td>2016-06-26</td>
<td>九阳豆浆机</td>
<td>258</td>
</tr>
<tr class="parent" id="row_03"><td colspan="3">手机系列</td></tr>
<tr class="child_row_03">
<td>2016-12-12</td>
<td>苹果6 plus</td>
<td>5688</td>
</tr>
<tr class="child_row_03">
<td>2016-12-30</td>
<td>苹果7 plus</td>
<td>7688</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$('tr.parent').click(function(){ //获取父行
$(this).toggleClass('selected') //添加/删除高亮
.siblings('.child_'+this.id).toggle(); //显示/隐藏子行
})
})
</script>
</body>
</html>
效果：
应用三：表格内容筛选
须要用到的API
:contains( text ) --> 匹配包含给定文本的元素
$.trim(str) --> 去掉字符串起始和结尾的空格
filter(expr|obj|ele|fn) --> 筛选出与指定表达式匹配的元素集合
show([speed,[easing],[fn]]) --> 显示隐藏的匹配元素，不管这个元素是经过 hide( ) 方法隐藏的仍是在 CSS里设置了 display: none, 这个方法都有效
hide([speed,[easing],[fn]]) --> 隐藏显示的匹配元素
keyup([[data],fn]) --> 当按钮被松开时，发生 keyup 事件。它发生在当前得到焦点的元素上
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table{
border-collapse: collapse;
}
th, td{
width:100px;
border:1px solid #ddd;
text-align:center;
}
</style>
</head>
<body>
<div>
筛选：<input type="text" id="filterName">
</div>
<table>
<thead>
<tr>
<th>下单时间</th>
<th>产品名称</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>2013-04-26</td>
<td>海尔电冰箱</td>
<td>3688</td>
</tr>
<tr>
<td>2014-11-11</td>
<td>格力空调</td>
<td>5689</td>
</tr>
<tr>
<td>2015-01-14</td>
<td>美的电饭煲</td>
<td>452</td>
</tr>
<tr>
<td>2016-08-26</td>
<td>小米净化器</td>
<td>2258</td>
</tr>
<tr>
<td>2016-12-12</td>
<td>苹果6 plus</td>
<td>5688</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$("#filterName").keyup(function(){
$("table tbody tr")
.hide()
.filter(":contains('"+( $(this).val().trim() )+"')") //注意contains内部的空格和字符串的拼接
.show();
}).keyup();
</script>
</body>
</html>
效果：
相关文章
- 1. 利用jQuery实现表格的隔行变色、高亮显示
- 2. jQuery实现表格隔行换颜色：
- 3. 表格 的 隔行换色
- 4. 前端-table表格隔行变色
- 5. js实现表格隔行变色--与jQuery的对比
- 6. 基于jQuery的表格特效（隔行、滑动、点击变色)
- 7. JQ---表格展开与关闭
- 8. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效
- 9. 三、案例：使用jQuery完成表格的隔行换色
- 10. 隔行变色
- 更多相关文章...
- • jQuery Mobile 列表内容 - jQuery Mobile 教程
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • Docker容器实战(六) - 容器的隔离与限制
- • NewSQL-TiDB相关
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案
欢迎关注本站公众号,获取更多信息
