在jQuery中,使用表格是很常見的。如何在表格中使用復選框,并且能夠高亮選擇的行呢?我們可以使用以下代碼實現:
$(document).ready(function(){
$('table input[type="checkbox"]').click(function(){
var checked = $(this).prop("checked"); //獲取當前復選框的狀態
if(checked){
$(this).closest("tr").addClass("highlight"); //如果選中,添加高亮樣式
}else{
$(this).closest("tr").removeClass("highlight"); //如果取消選中,去掉高亮樣式
}
});
});
代碼解釋:
- 首先使用jQuery選擇器選擇所有表格中的復選框
- 給復選框添加點擊事件監聽
- 使用closest()方法找到復選框最近的tr元素(即表格中的一行)
- 如果復選框被選中,使用addClass()方法添加高亮樣式
- 如果復選框被取消選中,使用removeClass()方法去掉高亮樣式
以上代碼可以應用于任何表格,在復選框被選中或取消選中時,會自動給所在行添加或去掉高亮樣式。通過這種方式,我們能夠方便、快捷地使用復選框進行操作,并且增強了用戶的使用體驗。
上一篇div id名稱