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

来源：互联网发布：vb项目开发全程实录编辑：程序博客网时间：2024/06/05 15:55
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>form表单验证</title><style>body {width: 700px;margin: 0 auto;}* {padding: 0px;margin: 0px;}table {border: 1px solid;width: 100%;padding: 0px;}td,th {border: 1px solid;}</style><script src="js/jquery-1.11.1.js"></script><script>$(function() {var city = [["邯郸", "石家庄"],["郑州", "安阳"]];$("#province").change(function() {$("#cityx").siblings().remove();var c = $("#province").val();for(var i = 0; i < city[c].length; i++) {var p = $("<option></option>");p.text(city[i][c]);$("#city").append(p);}});$("#checkedAll").change(function() {var isck = this.checked;//遍历$("input[name='ck']").each(function() {$(this).prop("checked", isck);})});$("#deleteAll").click(function() {var dels = $("input:checked[name='ck']");if(dels.length == 0) {alert("请选择要删除的元素");return;}//获取所有被选中的name为ck的元素$("input:checked[name='ck']").each(function() {$(this).parent().parent().remove();});});});</script><script>function aa() {var temprows = $("table tr").size();//创建新的一行var $tr = $("<tr></tr>");var $td = $("<td></td>");$td.append($("<input type='checkbox' name='ck' />"));$tr.append($td);//获取所有input下的元素var xs = $("form :input[type='text']");for(var i = 0; i < xs.length; i++) {var $td1 = $("<td></td>");$td1.text(xs[i].value);//把元素添加到tr中$tr.append($td1);}var va = $("#province option:selected").text();var $td1 = $("<td></td>");$td1.text(va);//把元素添加到tr中$tr.append($td1);var va = $("#city").val();var $td1 = $("<td></td>");$td1.text(va);//把元素添加到tr中$tr.append($td1);var $td1 = $("<td><button onclick='del(this)'>删除</button> </td>");//把元素添加到tr中$tr.append($td1);$("table").append($tr);}//刪除行function del(e) {e.parentNode.parentNode.remove();}</script></head><body><form>姓名:<input type="text" id="uname" /> <br /> email:<input type="text" id="email" /><br /> 电话:<input type="text" id="tel" /> <br />省份:<select id="province"><option>---请选择省份</option><option value="0">河北省</option><option value="1">河南省</option></select>城市:<select id="city"><option id="cityx">---请选择城市</option></select><input id="save" type="button" value="添加" onclick="aa()" /></form><table><tr><td colspan="6"><button id="deleteAll">批量删除</button></td></tr><tr><th><input type="checkbox" id="checkedAll" />全选/全不选</th><th>姓名</th><th>email</th><th>电话</th><th>省份</th><th>城市</th><th>操作</th></tr></table></body></html>
阅读全文
0 0