使用jQuery實現增刪改查
阿新 • • 發佈：2019-02-01
- jquery用的是1.11版本
- css就用bootstrap吧
- 因為增和改用了模態框修改，所以還用了bootstrap.js實現模態框的彈出和關閉
做了個簡單的表格來實現功能
HTML程式碼段
//表格 <div class="container" style="padding-top: 40px;"> <div class="form-group"> <div class="row"> <div class="col-md-8"> <input type="text" class="form-control swich" /> </div> <div class="col-md-3"> <button class="btn btn-danger sreach">搜尋</button> <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button> </div> </div> </div> <table class="table table-bordered text-center"> <tr> <td>編號</td> <td>姓名</td> <td>成績</td> <td>操作</td> </tr> <tr> <td>1</td> <td>張三</td> <td>89</td> <td> <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">刪除</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>91</td> <td> <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">刪除</button> </td> </tr> <tr> <td>3</td> <td>劉一</td> <td>80</td> <td> <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">刪除</button> </td> </tr> </table> </div> //修改的模態框 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">修改資訊</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <input type="text" placeholder="編號" id="reusrnum" class="form-control" /> </div> <div class="form-group"> <input type="text" placeholder="名字" id="reusrname" class="form-control" /> </div> <div class="form-group"> <input type="text" placeholder="成績" class="form-control" id="rescore" /> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div> //增加的模態框 <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">增加資訊</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <input type="text" placeholder="編號" id="reusrnum" class="form-control" /> </div> <div class="form-group"> <input type="text" placeholder="名字" id="reusrname" class="form-control" /> </div> <div class="form-group"> <input type="text" placeholder="成績" class="form-control" id="rescore" /> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加資訊</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal --> </div>
Jquery程式碼段
<script> //刪除的功能 $(document).on("click", ".del", function() { $(this).parents("tr").remove() }) //改的功能 var _this = null $(document).on("click", ".rev", function() { var _arr = [] _this = $(this).parents("tr") $(this).parents("tr").find("td:not(:last)").each(function(){ _arr.push($(this).text()) }) $("#myModal").find("input").each(function(i){ $(this).val(_arr[i]) }) }) $(document).on("click",".olk", function(){ var _arr = [] $("#myModal").find("input").each(function(){ _arr.push($(this).val()) }) _this.find("td:not(:last)").each(function(i){ $(this).text(_arr[i]) }) }) //增加的功能 $(document).on("click",".aad",function(){ var _arr = [] var str = "" $("#myModel").find("input").each(function(){ _arr.push($(this).val()) }) str = '<tr><td>'+_arr[0]+'</td><td>'+_arr[1]+'</td><td>'+_arr[2]+'</td><td><button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">刪除</button></td></tr>' $(".table").append(str) }) //查的功能 $(".sreach").click(function(){ var oS = $(".swich").val() if(oS.length==0){ alert("請輸入點東西") }else if($("table tr td:contains('"+oS+"')").length==0){ alert("找不到資料") }else{ $(".table tr:not(:first)").hide() $(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true) } }) </script>
ps:新人，class的命名有點不規範...將就看著吧
解說思路
ps:要記得物件快取 _this = $(this).null
1.實現刪的功能
首先準確地找到當前按鈕的父級元素tr，然後remove()掉就實現了刪的功能
2.實現改的功能
這裡先做了個數組來儲存已有的資訊， 用遍歷的方法each()放進陣列，陣列的資料再push()進模態框的input框val()可進行顯示
點選模態框的確認按鈕才能實現更改，所以又要重新將已更改的input框的val()重新遍歷進另外的一個數組進行儲存，再push()進表格就實現更改的更改了
3.實現增的功能
增加的功能也用了模態框來採集資料，所以也用一個數組來儲存資料，將已採集的input框val()遍歷進陣列，建立一個命名為str的dom節點，用陣列下標來插入要追加的dom節點，增加的功能就實現了
4.實現查的功能
首先要獲取搜尋框裡val()， 判斷搜尋框的長度是否為0，假如是0就彈出“請輸入點東西”，再用contains()方法判斷搜尋框的內容在表格裡的有沒有，沒有就彈出“找不到資料”，再或者搜素框的內容在表格裡有就把除了第一行的資料hide()，將表格裡有和val()一樣的tr show()出來
整個table的增刪改查的功能就實現啦