表格操作
1.隔行变色：对普通表格进行隔行换色；单击显示高亮样式；复选框选中高亮
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
<title>表格应用--隔行/选中变色</title>
<style type="text/css">
.tble{
border: 1px solid red;
}
/*偶数行样式*/
.even{
background: red;
}
/*奇数行样式*/
.odd{
background: yellow;
}
.selected{
background: red;
}
</style>
</head>
<body>
<table class="tble">
<thead>
<tr><th><input type="checkbox" id="CheckedAll"/></th><th>姓名</th><th>姓别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td><input type="checkbox" id="checkOne" /></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
//1.普通隔行换色，从表头开始算起
$("tr:odd").addClass("odd"); //给奇数行添加样式
$("tr:even").addClass("even"); //给偶数行添加样式
//2.给tbody中添加隔行换色
$("tbody>tr:odd").addClass("odd"); //给tbody中奇数行添加样式
$("tbody>tr:even").addClass("even"); //给tbody中偶数行添加样式
//3.单选控制表格行高亮
$("tbody>tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked',true);
})
//4.复选框高亮样式
$('tbody>tr').click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected').find(':checkbox').attr('checked',false);
}else{
$(this).addClass('selected').find(':checkbox').attr('checked',true);
}
})
})
</script>
</body>
</html>
如果需要查看网页显示效果，复制粘贴代码运行就可以
2.表格展开关闭
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
<title>表格应用--表格展开关闭</title>
<style type="text/css">
.tble{
border: 1px solid red;
}
/*偶数行样式*/
.even{
background: red;
}
/*奇数行样式*/
.odd{
background: yellow;
}
.selected{
background: red;
}
.parent{
background: #CCCCCC;
}
</style>
</head>
<body>
<table class="tble">
<thead>
<tr><th></th><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></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td></td><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr class="child_row_03"><td></td><td>李四</td><td>男</td><td>浙江杭州</td></tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$('tr.parent').click(function(){ // 获取所谓的父行
$(this)
.toggleClass("selected") // 添加/删除高亮
.siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
});
})
</script>
</body>
</html>
网页显示效果：
3.表格内容筛选：使用filter()筛选方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<title>表格应用--表格内容筛选</title>
</head>
<body>
<div>
<br/>
筛选：<input id="filterName" /><br/>
</div>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>李四</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>张珊</td><td>女</td><td>浙江宁波</td></tr>
</tbody>
<script type="text/javascript">
$(function(){
//使用filter()筛选方法
$("#filterName").keyup(function(){ //为文本框绑定keyup事件
$("table tbody tr").hide().filter(":contains('"+( $(this).val() )+"')").show();
}).keyup(); //DOM加载完成时，绑定事件完成后立即触发
})
</script>
</table>
</body>
</html>
网页显示效果：
其他应用
1.网页字体大小：网站中经常有“放大”和“缩小”字号的控制，单击他们，控制字体呈现不同大小的效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
<title>其他应用--字体放大缩小</title>
</head>
<body>
<form>
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<p id="para">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。</p>
</div>
</div>
</form>
<script type="text/javascript">
$(function(){
//无限放大 缩小字体
$("span").click(function(){ //为span元素绑定单击事件
var thisEle = $("#para").css("font-size"); //获取id为para的字体大小。获取的值是将返回的数字和单位
var textFontSize = parseInt(thisEle,10); //parseInt()方法转换，去掉单位
var unit = thisEle.slice(-2); //获取单位，slice()返回字符串中从指定的字符开始的一个字符串
var cName = $(this).attr("class");
if(cName=="bigger"){
textFontSize += 2
}else{
textFontSize -= 2;
}
$("#para").css("font-size",textFontSize + unit); //再次获取“para”元素，并为他的font-size属性赋新值（textFontSize），并拼接上单位
})
//上面方法是无限放大，无限缩小，如果不合适，则设置最大字体和最小字体
$("span").click(function(){ //为span元素绑定单击事件
var thisEle = $("#para").css("font-size"); //获取id为para的字体大小。获取的值是将返回的数字和单位
var textFontSize = parseInt(thisEle,10); //parseInt()方法转换，去掉单位
var unit = thisEle.slice(-2); //获取单位，slice()返回字符串中从指定的字符开始的一个字符串
var cName = $(this).attr("class");
if(cName == "bigger"){
if(textFontSize <= 22){
textFontSize += 2;
}
}else if(cName == "smaller"){
if(textFontSize >= 12){
textFontSize -= 2;
}
}
$("#para").css("font-size",textFontSize + unit);
})
})
</script>
</body>
</html>
网页显示效果：两种不同的显示效果，第一种无限放大缩小；第二种控制最大最小字号进行显示
2.网页选项卡：通过隐藏和显示来切换不同内容
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>
<title>其他应用--网页选项卡</title>
<style type="text/css">
.selected{background: yellow;}
.tab{400px; font-size:12px;}
.tab_menu ul{padding:0px;margin:0px;}
.tab_menu li{list-style:none;display:block; float:left;background:#C2CEFE; height:22px; line-height:22px;
padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid;}
.tab_box{400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }
.tab_menu ul li.selected{background:#dadada; cursor:pointer; }
.hide{display:none;}
.hover{background: green;}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">实时</li>
<li>新闻</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>实时</div>
<div class="hide">新闻</div>
<div class="hide">娱乐</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $div_li = $("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前li元素高亮
.siblings().removeClass("selected"); //去掉其他同辈li元素的高亮
var index = $div_li.index(this); //获取当前单击的li元素在全部li元素中的索引
$("div.tab_box > div") //选取子节点
.eq(index).show() //显示li元素对应的div元素
.siblings().hide(); //隐藏其他几个同辈的div元素
}).hover(function(){ //添加光标滑过效果
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
</script>
</body>
</html>
网页显示效果：
