jQuery實現(xiàn)增刪改查

更新時間：2020年12月22日 10:46:16 作者：Uncle_sixsix

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)增刪改查，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)增刪改查的具體代碼，供大家參考，具體內(nèi)容如下

jquery用的是1.11版本
css就用bootstrap吧
因為增和改用了模態(tài)框修改，所以還用了bootstrap.js實現(xiàn)模態(tài)框的彈出和關(guān)閉

做了個簡單的表格來實現(xiàn)功能

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>
    //修改的模態(tài)框
 <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">&times;</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">關(guān)閉</button>
   <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
   </div>
  </div>
  <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
 </div>
 //增加的模態(tài)框
 <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">&times;</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">關(guān)閉</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("找不到數(shù)據(jù)")
   }else{
   $(".table tr:not(:first)").hide()
   $(".table tr:contains('"+oS+"')").show().find("input").prop("checked",true)
   }
 
  })
</script>

ps:新人，class的命名有點不規(guī)范...將就看著吧

解說思路

ps:要記得對象緩存 _this = $(this).null

1.實現(xiàn)刪的功能

首先準(zhǔn)確地找到當(dāng)前按鈕的父級元素tr，然后remove()掉就實現(xiàn)了刪的功能

2.實現(xiàn)改的功能

這里先做了個數(shù)組來存儲已有的信息，用遍歷的方法each()放進數(shù)組，數(shù)組的數(shù)據(jù)再push()進模態(tài)框的input框val()可進行顯示

點擊模態(tài)框的確認(rèn)按鈕才能實現(xiàn)更改，所以又要重新將已更改的input框的val()重新遍歷進另外的一個數(shù)組進行存儲，再push()進表格就實現(xiàn)更改的更改了

3.實現(xiàn)增的功能

增加的功能也用了模態(tài)框來采集數(shù)據(jù)，所以也用一個數(shù)組來存儲數(shù)據(jù)，將已采集的input框val()遍歷進數(shù)組，創(chuàng)建一個命名為str的dom節(jié)點，用數(shù)組下標(biāo)來插入要追加的dom節(jié)點，增加的功能就實現(xiàn)了

4.實現(xiàn)查的功能

首先要獲取搜索框里val()，判斷搜索框的長度是否為0，假如是0就彈出“請輸入點東西”，再用contains()方法判斷搜索框的內(nèi)容在表格里的有沒有，沒有就彈出“找不到數(shù)據(jù)”，再或者搜素框的內(nèi)容在表格里有就把除了第一行的數(shù)據(jù)hide()，將表格里有和val()一樣的tr show()出來

整個table的增刪改查的功能就實現(xiàn)啦。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: