| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>週考2練習</title> | |
| <script src="js/jquery-3.2.1.min.js"></script> | |
| <script language="JavaScript"> | |
| $(function(){ | |
| //判斷/點擊添加獲取text的值 | |
| $("#add").click(function(){ | |
| var xingming=$("#name").val(); | |
| var sex=$("#xb option:selected").text(); | |
| var data=$("#data").val(); | |
| var zhuzhi=$("#dz option:selected").text(); | |
| var xizhi=$("#xz option:selected").text(); | |
| if(xingming.length<3 || xingming.length>20 || sex=="" || data=="" || zhuzhi=="請選擇" || xizhi=="請選擇") { | |
| alert("輸入信息有誤!"); | |
| }else{ | |
| $("#tab").append("<tr class='rr'>" | |
| +"<td width='100px'><input type='checkbox' name='box' id='topck'/></td>" | |
| +"<td width='120px'>"+xingming+"</td>" | |
| +"<td width='120px'>"+sex+"</td>" | |
| +"<td width='150px'>"+data+"</td>" | |
| +"<td width='150px'>"+zhuzhi+"-"+xizhi+"</td>" | |
| +"<td align='center'><input style='width: 100px;' type='button' value='刪除' οnclick='del(this)' id='shan'/>"); | |
| $(".rr:even").css("background","#EEEEEE"); | |
| $(".rr:odd").css("background","#FFFFFF"); | |
| } | |
| }); | |
| //批量刪除 | |
| $('#delall').click(function(){ | |
| var checks=$(":checked[name=box]"); | |
| if (checks.length==0) { | |
| alert("請至少選擇一條刪除！"); | |
| return; | |
| } | |
| for(var i in checks){ | |
| checks[i].parentNode.parentNode.remove(); | |
| } | |
| }); | |
| //全選/反選 | |
| $('#topck').click(function(){ | |
| var ckss=$("input[name=box]") | |
| for(var i in ckss) { | |
| if (ckss[i].checked==false) { | |
| ckss[i].checked=true; | |
| } else{ | |
| ckss[i].checked=false; | |
| } | |
| } | |
| /* $("input[name=box]").each(function(){ | |
| //通過this.checked代替了true或false,都變成他們的相反狀態 | |
| this.checked=!this.checked | |
| });*/ | |
| }); | |
| }); | |
| //刪除 清空 | |
| function del(obj){ | |
| $(obj).parent().parent().remove(); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <form action="#" method="post"> | |
| | |
| 姓名: <input type="text" id="name" /><span id="sname"></span> | |
| 性別: <select style="width: 80px;" id="xb"> | |
| <option>男</option> | |
| <option>女</option> | |
| </select> | |
| 生日: <input type="date" id="data" /> | |
| 住址: <select style="width: 80px;" id="dz"> | |
| <option>北京</option> | |
| <option>河南</option> | |
| </select> | |
| <select style="width: 80px;" id="xz"> | |
| <option>西二旗</option> | |
| <option>西三旗</option> | |
| </select> | |
| | |
| <input style="width: 100px; height: 30px; background-color: chartreuse;" type="button" id="add" value="添加" /> | |
| <br /> | |
| <input style="margin-left: 650px; margin-top: 40px; width: 100px; height: 30px; background-color: yellow" type="button" value="全選/反選" id="topck"/> | |
| | |
| <input style="width: 100px; height: 30px; background-color: red;" type="button" id="delall" value="批量刪除" /> | |
| </form> | |
| <table id="tab" border="1" style="margin-top: 10px; margin-left: 20px;"> | |
| <tr bgcolor="#999999"> | |
| <td width="100"><input type="checkbox" name="box" id="topck"/></td> | |
| <td width="120">姓名</td> | |
| <td width="120">性別</td> | |
| <td width="150">生日</td> | |
| <td width="150">住址</td> | |
| <td width="150">刪除</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
反選
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.