JQuery表格全選和不選
阿新 • • 發佈：2018-11-20
01JQuery表格全選和不選.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01表格全選和不選</title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 1. 匯入JQ的包 2. 文件載入完成函式: 頁面初始化 3. 獲得所有的行 : 元素選擇器 4. 根據行號奇數/偶數去修改顏色 --> <script> $(function(){ //獲得所有的行 : 元素選擇器 $("tbody > tr:even").css("background-color","#CCCCCC"); //修改基數行 $("tbody > tr:odd").css("background-color","#FFF38F"); // $("tbody > tr").css("background-color","#FFF38F"); }); /* 表格全選和全不選 進一步確定事件: 點選事件 */ $(function(){ //繫結點選事件 //this 代表的是當前函式的所有者 $("#checkAll").click(function(){ //獲取當前選中狀態 // alert(this.checked); //獲取所有分類項的checkbox // 屬性選擇器[屬性名稱='屬性值'] $("input[type='checkbox']:gt(0)").prop("checked",this.checked); }); }); </script> </head> <body> <table border="1px" width="600px" id="tab"> <thead> <tr > <td> <input type="checkbox" id="checkAll" /> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" /> </td> <td>1</td> <td>手機數碼</td> <td>華為,小米,尼康</td> <td>數碼產品質量最好</td> <td> <a href="#">修改</a>|<a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>2</td> <td>美酒美食</td> <td>葡萄酒,紅酒</td> <td>好多啊!!!</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>3</td> <td>電腦辦公</td> <td>聯想,小米</td> <td>筆記本特賣</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>4</td> <td>饞嘴零食</td> <td>辣條,麻花,黃瓜</td> <td>年貨</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>5</td> <td>床上用品</td> <td>床單,被套,四件套</td> <td>都是套子</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> </tbody> </table> </body> </html>
02JQuery多種方式實現表格全選和不選.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>02多種方式實現表格全選和不選</title> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 1. 匯入JQ的包 2. 文件載入完成函式: 頁面初始化 3. 獲得所有的行 : 元素選擇器 4. 根據行號奇數/偶數去修改顏色 --> <script> $(function(){ //獲得所有的行 : 元素選擇器 $("tbody > tr:even").css("background-color","#CCCCCC"); //修改基數行 $("tbody > tr:odd").css("background-color","#FFF38F"); // $("tbody > tr").css("background-color","#FFF38F"); }); /* 表格全選和全不選 進一步確定事件: 點選事件 */ $(function(){ //繫結點選事件 //this 代表的是當前函式的所有者 $("#checkAll").click(function(){ //獲取當前選中狀態 // alert(this.checked); //獲取所有分類項的checkbox // 屬性選擇器[屬性名稱='屬性值'] // $("input[type='checkbox']:gt(0)").prop("checked",this.checked); //這個可行 //使用層級選擇器來實現 tbody > tr > td > input // $("tbody > tr > td > input").prop("checked",this.checked); //這個可行 // $("td > input").prop("checked",this.checked); //這個可行 // #tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type="checkbox"] $("input").prop("checked",this.checked); }); }); </script> </head> <body> <table border="1px" width="600px" id="tab"> <thead> <tr > <td> <input type="checkbox" id="checkAll" /> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" /> </td> <td>1</td> <td>手機數碼</td> <td>華為,小米,尼康</td> <td>數碼產品質量最好</td> <td> <a href="#">修改</a>|<a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>2</td> <td>美酒美食</td> <td>葡萄酒,紅酒</td> <td>好多啊!!!</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>3</td> <td>電腦辦公</td> <td>聯想,小米</td> <td>筆記本特賣</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>4</td> <td>饞嘴零食</td> <td>辣條,麻花,黃瓜</td> <td>年貨</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>5</td> <td>床上用品</td> <td>床單,被套,四件套</td> <td>都是套子</td> <td><a href="#">修改</a>|<a href="#">刪除</a></td> </tr> </tbody> </table> </body> </html>