脚本宝典收集整理的这篇文章主要介绍了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; 性别： <select id="gender"> <option>男</option> <option>女</option> </select> 生日：<input type="date" id="birthday" /> 住址： <select id="province"> <option>北京</option> <option>山西</option> </select> <select id="city"> <option>海淀区</option> <option>朝阳区</option> </select> <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;" /> 性别： <select id="gender"> <option>男</option> <option>女</option> </select> 生日：<input type="date" id="birthday" /> 住址： <select id="province"> <option>北京</option> <option>山西</option> </select> <select id="city"> <option>海淀区</option> <option>朝阳区</option> </select> <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：384754419，请注明来意。