溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
應用一：表格隔行變色
1、普通的隔行變色：
需要用到的 API
$(':odd') --> 匹配所有索引值為奇數的元素，從0開始計數
$(':even') --> 匹配所有索引值為偶數的元素，從0開始計數
<!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>頁面效果：
2、單選按鈕控制表格行高亮
需要用到的API
end( ) --> 回到最近的一個“破壞性”操作之前，即，將匹配的元素列表變為前一次的狀態
: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>頁面效果：
3、復選框控制表格高亮
重點注意：三目運算在選擇器中的用法
<!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>效果：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
