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

最新推荐文章于 2021-11-24 11:02:35 发布

潜水断桥

最新推荐文章于 2021-11-24 11:02:35 发布

阅读量504

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37454196/article/details/78719827

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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 οnclick='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="添加" οnclick="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>