HTML jquery 添加+删除+批量删除+二级联动

来源：互联网发布：手机分享电脑网络编辑：程序博客网时间：2024/06/04 21:16
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>body{width:80%;margin: 0 auto;}table{width: 100%;border: 1px solid;}th,td{border: 1px solid;}tr:hover{background-color: yellow;}</style><script src="js/jquery-1.11.1.js"></script><!-- jquery事件方法 --><script>$(function(){var shengfen = [["西二旗", "上地"], ["安阳", "洛阳"]];//给省份选项改变的事件$("#pro").change(function() {//清空上次$("#cityx").siblings().remove();var sheng = $(this).val();//省份对应valuefor(var i = 0; i < shengfen[sheng].length; i++) {var $o = $("<option></option>");//创建option标签$o.html(shengfen[sheng][i]);$("#city").append($o);}});})</script><script>function del(e){$(e).parent().parent().remove();}function save(){var tr=$("<tr></tr>"); //使用jquery创建元素trtr.append("<td><input type='checkbox' name='ck' /> </td>");//append,识别html标签//获取用户名输入框的内容var td=$("<td></td>");td.text($("#uname").val());tr.append(td);//获取用户名输入框的内容var td=$("<td></td>");td.text($("#pwd").val());tr.append(td);//获取 性别的值var td=$("<td></td>");td.text($(":checked[name='sex']").val());tr.append(td);//获取邮箱var td=$("<td></td>");td.text($("#email").val());tr.append(td);//获取省var td=$("<td></td>");td.text($("#pro option:selected").text());tr.append(td);var td=$("<td></td>");td.text($("#city").val());tr.append(td);tr.append("<td><button onclick='del(this)'>删除</button></td>");//append,识别html标签//向table中添加一行数据$("table").append(tr);}function deleteAll(){var all= $("input:checked[name='ck']"); //所有name为ck并且是选择状态的checkboxconsole.log(all.length);  //所有选中的复选框的长度if(all.length==0){alert("请选择,然后进行删除");return;  //下面代码不执行}var f=confirm("确认删除!!");if(!f){ //如果点击了取消,不进行下面的删除return;}//删除for(var i=0;i<all.length;i++){all[i].parentNode.parentNode.remove();}}function ckAll(){                var isxz=$("#ckall")[0].checked;  //标识的作用                                //获取下面每个用户的选择框                var cks= $("input[name='ck']");                //调用jquery的遍历方法cks.each(function(){$(this).prop("checked",isxz);})}</script></head><body><!--业务逻辑 --><!--批量删除时: 1 获取所有选择的复选框元素   $("input:checked") --><!--           2 $("img").each(function(i){this.src = "test" + i + ".jpg";   把选择的复选框对应行进行删除                  });--><form>用户名<input type="text" id="uname" />密码: <input type="password" id="pwd" />性别:<input type="radio" name="sex" value="男" checked="checked" />男     <input type="radio" name="sex" value="女" />女 邮箱  <input type="email" id="email" />省:<select id="pro" ><option>--请选择--</option><option value="0" selected="selected">北京</option><option value="1">河南</option></select>市:<select id="city"><option id="cityx">--请选择--</option><option selected="selected">西二旗</option><option>上地</option></select><input type="button" onclick="save()" value="保存" /></form><table><tr> <td colspan="5"><button id="deleteAll" onclick="deleteAll()">批量删除</button></td> </tr><tr><th><input type="checkbox" id="ckall" onchange="ckAll()" /> 全选/全不选 </th><th>用户名</th><th>密码</th><th>性别</th><th>邮箱</th><th>省</th><th>市</th><th><button>操作</button></th></tr><tr><td><input type="checkbox" name="ck" /></td><td>马云</td><td>123</td><td>女</td><td>123@qq.com</td><td>北京</td><td>昌平</td><td><button onclick="del(this)">删除</button></td></tr></table></body></html>
阅读全文
0 0