《鋒利的jQuery》要點歸納（四）jQuery對錶單、表格的操作及更多應用（中：表格應用）

《鋒利的jQuery》要點歸納（四）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載入完時，綁定事件完成之後立即觸發，避免在重新整理頁面後篩選效果消失
})