欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

结合jquery和js做增删（代码实例）

程序员文章站 2022-10-26 12:36:23
结合jquery和js做增删（代码实例）

结合jquery和js做增删（代码实例）

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/jquery-3.2.1.min.js"></script>
  <script>
   $(document).ready(function(){
    $("#province").change(function(){
     if ($("#province").val() == "北京") {
      $("#city").empty();
      $("#city").append("<option>海淀区</option>");
      $("#city").append("<option>朝阳区</option>");
     }else if($("#province").val() == "山西"){
      $("#city").empty();
      $("#city").append("<option>太原市</option>");
      $("#city").append("<option>运城市</option>");
     }
    });
   });
   function add(){
    var name = $("#name").val();
    var gender = $("#gender").val();
    var birthday = $("#birthday").val();
    var province = $("#province").val();
    var city = $("#city").val();
    $("table").append("<tr><td><input type = 'checkbox' /></td><td>"+name+"</td><td>"+gender+"</td><td>"+birthday+"</td><td>"+province+city+"</td><td><button onclick='delete1(this)'>删除</button></td></tr>");
   }
   function delete1(a){
    alert("确定删除吗？");
    $(a).parent().parent().remove();
   }
   
   $(function(){
    //全选  反选
    $("#firsts").click(function(){
     $(":checkbox:gt(0)").each(function(){
      var f = $(this).prop("checked");
         $(this).prop("checked",!f);
     })
     
    });
    //批量删除
    $("#batchdelete").click(function(){
      var len = $(":checkbox:gt(0):checked").length;
      if (len>0) {
       alert("确定删除吗？");
       $(":checkbox:gt(0):checked").each(function(){
        
           $(this).parent().parent().remove();
          });
      } else{
       alert("请选择您想要删除的信息");
      }    
    }); 
   }); 
  </script>
  <style>
   #table1 tr:nth-child(odd){
    background: red;
   }
   #table1 tr:nth-child(even){
    background: yellow;
   }
   #table1 tr:nth-child(1){
    background: pink;
   }
  </style>
 </head>
 <body>
  <center>
   姓名：<input type="text" id="name" style="width: 100px;" />&nbsp;&nbsp;&nbsp; 
   性别：
   <select id="gender">
    <option>男</option>
    <option>女</option>
   </select>&nbsp;&nbsp;&nbsp;
    生日：<input type="date" id="birthday" />&nbsp;&nbsp;&nbsp;
   住址：
   <select id="province">
    <option>北京</option>
    <option>山西</option>
    
   </select>
   <select id="city">
    <option>海淀区</option>
    <option>朝阳区</option>
   </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <input type="button" value="添加" onclick="add()" style="background: yellow;" />
   
   <br /><br />
   <input type="button" value="全选/反选" id="firsts" style="background: yellow;" />
   <input type="button" value="批量删除" id="batchdelete" style="background: red;" />
   <br /><br />
   <table border="1" id="table1" style="width: 700px;">
    <tr>
     <td><input type="checkbox" id="first"/></td>
     <td>姓名</td>
     <td>性别</td>
     <td>生日</td>
     <td>住址</td>
     <td>操作</td>
    </tr>
    <tr>
     <td><input type="checkbox" /></td>
     <td>张三</td>
     <td>男</td>
     <td>1989-02-21</td>
     <td>北京西二旗</td>
     <td><input type="button" value="删除" onclick="delete1(this)" /></td>
    </tr>
    <tr>
     <td><input type="checkbox" /></td>
     <td>李四</td>
     <td>女</td>
     <td>1989-03-21</td>
     <td>河南郑州</td>
     <td><input type="button" value="删除" onclick="delete1(this)" /></td>
    </tr>
    
   </table>
  </center>
 </body>
</html>

上一篇： 系统存储过程，sp_executesql

下一篇： jQuery页面图片伴随滚动条逐渐显示的小例子

推荐阅读