JQuery是一個JavaScript庫,適用于快速簡便地開發(fā)JavaScript腳本,特別是用于DOM操作的。在處理表格的情況下,我們常常需要考慮行全選或者列全選,讓我們來看看如何使用JQuery在表格中實現(xiàn)這些功能。
// 行全選 $("#checkall").click(function(){ if(this.checked){ $("input[name='rowcheck']").each(function(){ this.checked=true; }); }else{ $("input[name='rowcheck']").each(function(){ this.checked=false; }); } }); // 列全選 $("th input[name='colcheck']").click(function(){ var index=$(this).parent().index(); if(this.checked){ $("input[name='rowcheck']").each(function(i){ if(i%(index+1)==0){ this.checked=true; } }); }else{ $("input[name='rowcheck']").each(function(i){ if(i%(index+1)==0){ this.checked=false; } }); } });
上述代碼中,“#checkall”是一個全選checkbox的ID,而“input[name='rowcheck']”是每一行的checkbox的名稱。當全選checkbox被點擊時,我們將遍歷每一行的checkbox,并將狀態(tài)修改為選中或者未選中。而列全選checkbox的邏輯稍微復雜一些,我們需要根據(jù)列的索引來判斷每一行對應的checkbox是否被選中。
上一篇div css標題