结合jquery和js做增删(代码实例)
程序员文章站
2022-05-04 09:25:42
结合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;" /> 性别: <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>
上一篇: iOS开发过程使用小技巧
下一篇: iOS 开发 block深入浅出详解
推荐阅读
-
结合jquery和js做增删(代码实例)
-
JS和jQuery通过this获取html标签中的属性值(实例代码)
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
JavaScript之事件委托实例(附原生js和jQuery代码)
-
结合jquery和js做增删(代码实例)
-
JS和jQuery通过this获取html标签中的属性值(实例代码)
-
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)_javascript技巧
-
html、css和jquery相结合实现简单的进度条效果实例代码
-
html、css和jquery相结合实现简单的进度条效果实例代码