摘要:结合jquery和js做增删(代码实例)结合jquery和js做增删(代码实例)

脚本宝典收集整理的这篇文章主要介绍了

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技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-结合jquery和js做增删(代码实例)

全部内容,希望文章能够帮你解决

js实例教程-结合jquery和js做增删(代码实例)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过