摘要:结合jquery和js做增删(代码实例)结合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>

结合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>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1470.html