jquery的資料增刪改查（全選，反選，全不選，批量刪除，新增資訊）
阿新 • • 發佈：2018-12-16
效果圖如下：
html程式碼如下：
<body> <div class="btn"> <button class="seleAll">全選</button> <button class="allDel">批量刪除</button> <button class="reverse">反選</button> <button class="noneSele">全不選</button> <button class="add">新增</button> </div> <table width="500" border="1" > <tr height="30" align="center"> <td> 選擇 </td> <td>姓名</td> <td>愛好</td> <td>性別</td> <td>刪除</td> </tr> <tr height="30" align="center"> <td><input type="checkbox" /></td> <td>范冰冰</td> <td>演戲</td> <td>女</td> <td><input class="toDel" type="button" value="del" /> </td> </tr> </table> <div class="obox"> <p><input class="name" type="text" value="姓名" /></p> <p> <select class="hobby"> <option>音樂</option> <option>籃球</option> <option>體育</option> </select> </p> <p> <select class="sex"> <option>男</option> <option>女</option> </select> </p> <p class="push"> <button>確認提交</button> </p> </div>
css程式碼如下：
.obox{ width: 400px; height: 400px; margin: 0 auto; background: #e5e5e5; display:none; } .obox input{ width: 150px; height: 30px; } .obox select{ width: 150px; height: 30px; } .obox p{ width: 150px; height: 30px; margin: 0 auto; margin-top: 30px; } .push button:active{ background: #00f; }
jq程式碼如下：
// 點選新增顯示彈窗 $(".add").on('click',function(){ $(".obox").show() $(this).css({ "background":"#0f0" }) }) // 點選確認提交提交資料 彈窗消失 $(".push button").on("click",function(){ // 獲取文字框資料 var theName= $(".name").val() var theHobby=$(".hobby").val() var theSex=$(".sex").val() // <tr align="center"> // <td><input type="checkbox" /></td> // <td>范冰冰</td> // <td>演戲</td> // <td>女</td> // <td><input type="button" value="del" /> </td> // // </tr> // 將資料放到表格中 $("table").append(`<tr height='30' align='center'> <td><input type='checkbox' /> </td> <td >${theName} </td> <td>${theHobby} </td> <td>${theSex} </td> <td> <input class='toDel' type='button' value='del' /></td> </tr>`) //彈窗消失 $(".obox").hide() $(".add").css({ "background":"#ccc" }) //點選del 刪除本條資料 $(".toDel").on("click",function(){ $(this).parent().parent().remove() }) }) //點選全選 全部選中 $(".seleAll").on('click',function(){ var seleAll=$("input[type='checkbox']") seleAll.each(function(){ seleAll.prop('checked',true) }) }) // 反選 $(".reverse").on("click",function(){ var seleAll=$("input[type='checkbox']") seleAll.each(function(){ this.checked=!this.checked }) }) //全不選 $(".noneSele").on("click",function(){ var seleAll=$("input[type='checkbox']") seleAll.each(function(){ seleAll.prop('checked',false) }) }) //批量刪除 $(".allDel").on("click",function(){ var allDel=$(":checkbox:checked") if (allDel.length>0) { allDel.each(function(){ $(this).parent().parent().remove() }) } else{ alert('請選中資料後在刪除') } }) //點選del 刪除本條資料 $(".toDel").on("click",function(){ $(this).parent().parent().remove() })
好了！如果有更好的修改意見或建議歡迎留言