JQuery練習丨多選、手風琴、省市聯動、突出顯示、刪除表格
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // 下拉選單 $(function(){ $(".menu-title").click( function(){ $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200); } ); }) // 刪除多行 $(function(){ $("#del").click(function(){ var $arr = $("input:checked"); // for (var index=0;index<$arr.length;index++) { // var $parentEl = $arr[index].parentNode.parentNode; // $parentEl.remove(); // } $arr.parent().parent().remove(); }); }) // 全選 $(function(){ $("#checkAll").click(function(){ var value = $(this).prop("checked"); var $arr = $(".check-item"); $arr.prop("checked",value); // $(".check-item").prop("checked",value); }) }) // 省市聯動 $(function(){ var arr = new Array(); arr[0] = ["重慶市","梁平縣","銅梁區"]; arr[1] = ["成都市","綿陽市","德陽市"]; $("#province").change(function(){ var cityIndex = this.value; $("#city").empty(); $.each(arr, function(i,n) { if(cityIndex==i){ //5.遍歷該省份下的所有城市 $.each(arr[i], function(j,m) { //alert(m); //6.建立城市文字節點 var textNode = document.createTextNode(m); //7.建立option元素節點 var opEle = document.createElement("option"); //8.將城市文字節點新增到option元素節點中去 $(opEle).append(textNode); //9.將option元素節點追加到第二個下拉列表中去 $(opEle).appendTo($("#city")); }); } }); }) }) </script> <style type="text/css"> /*突出顯示*/ img{ opacity: 0.5; } img:hover{ opacity: 1; } li{ list-style: none; } .menu-content{ display: none; height: 40px; border: 1px solid #666666; } </style> </head> <body> <!--突出顯示--> <h2>突出顯示</h2> <img src="img/01.jpg" alt="" /> <img src="img/02.jpg" alt="" /> <img src="img/03.jpg" alt="" /> <img src="img/04.jpg" alt="" /> <img src="img/05.jpg" alt="" /> <img src="img/06.jpg" alt="" /> <!--下拉選單--> <h2>下拉選單</h2> <ul> <li> <span class="menu-title"> 選單一 </span> <div class="menu-content"> 這是選單的內容 </div> </li> <li> <span class="menu-title"> 選單二 </span> <div class="menu-content"> 這是選單的內容 </div> </li> </ul> <!--批量刪除--> <h2>批量刪除</h2> <table> <tr> <td><input type="checkbox" name="" id="" value="" /></td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="" id="" value="" /></td> <td>2</td> </tr> <tr> <td><input type="checkbox" name="" id="" value="" /></td> <td>3</td> </tr> </table> <button id="del">刪除所選行</button> <!--全選--> <h2>全選</h2> <table> <tr> <td><input type="checkbox" name="" id="checkAll" value="" /></td> <td>全選</td> </tr> <tr> <td><input type="checkbox" class="check-item" id="" value="" /></td> <td>1</td> </tr> <tr> <td><input type="checkbox" class="check-item" name="" id="" value="" /></td> <td>2</td> </tr> <tr> <td><input type="checkbox" class="check-item" name="" id="" value="" /></td> <td>3</td> </tr> </table> <!--省市聯動--> <h2>省市聯動</h2> <select name="" id="province"> <option value="0">重慶</option> <option value="1">四川</option> </select> <select name="" id="city"> <option value="">請先選擇省份</option> </select> </body> </html>