使用jQuery实现动态表单及数据验证-优快云博客

本文链接：https://blog.youkuaiyun.com/nyf19980311/article/details/78999155

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
	padding: 0px;
	margin: 0px;
	/box-sizing: border-box;/
	}
	.box{
	width: 800px;
	height: 500px;
	margin: 20px auto;
	padding: 10px;
	}
	.box table:nth-child(1){
	width: 780px;
	margin-bottom: 5px;
	}
	.box table:nth-child(1) tr td{
	height: 30px;
	}
	.box table:nth-child(1) tr td input{
	width: 84px;
	height: 25px;
	}
	.box table:nth-child(1) tr td select{
	width: 84px;
	height: 25px;
	}
	.box table:nth-child(1) tr td .btn{
	background: #99ff00;
	border-radius: 5px;
	border: 1px solid #666666;
	}
	.box>input{
	width: 70px;
	height: 28px;
	float: right;
	border-radius: 5px;
	border: 1px solid #666666;
	margin-left: 30px;
	margin-bottom: 5px;
	}
	.box>input:nth-child(3){
	background: green;
	}
	.box>input:nth-child(2){
	background: yellow;
	}
	.box .bg{
	width: 780px;
	margin-bottom: 5px;
	}
	.box .bg tr:nth-child(1){
	background: gold;
	}
	.box .bg tr:nth-child(2n){
	background: greenyellow;
	}
	</style>
	<script src="lib/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
	$(function(){
	var city = $("#city").val();
	var regions = [["海淀","朝阳"],["安阳","濮阳","信阳","南阳","洛阳"]];
	for(var i = 0; i < regions[city].length; i++){
	var op = $("<option></option>");
	console.log("---",regions[city][i]);
	op.text(regions[city][i]);
	$("#region").append(op);
	}
	$("#city").change(function(){
	city = $(this).val();
	$("#region").empty();
	for(var i = 0; i < regions[city].length; i++){
	var op = $("<option></option>");
	console.log("---",regions[city][i]);
	op.text(regions[city][i]);
	$("#region").append(op);
	}
	});
	});

	function add(){
	var b1 = false;
	var b2 = false;
	var name = $("#name").val();
	var birthday = $("#birthday").val();
	var sex = $("#sex").val();
	var sel = $("#region").val();
	var cs = $("#city option:selected").html();

	if(name == ""){
	b1 = false;
	}else if(name.length < 3 \|\| name.length >30){
	b1 = false;
	}else{
	b1 = true;
	}

	if(birthday == ""){
	b2 = false;
	}else{
	b2 = true;
	}

	if(b1 == false \|\| b2 == false){
	alert("输入信息有误");
	}else{
	$(".bg").append("<tr>" +
	"<td><input type='checkbox' name='ck' ></td>" +
	"<td>" + name +"</td>" +
	"<td>" + sex +"</td>" +
	"<td>" + birthday +"</td>" +
	"<td>" + cs + "-" + sel +"</td>" +
	"<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
	"</tr>");
	}
	}
	//弹窗提示
	function del(p){
	var f = confirm("确认删除!!!");
	if(!f){
	return;
	}
	p.parentNode.parentNode.remove();
	}
	function cheAll(){
	var cek = $("#che")[0].checked;
	var ck = $("input[name='ck']");
	for(var i = 0; i < ck.length; i++){
	ck[i].checked = cek;
	}
	}
	function che(){
	var cks = document.getElementsByName("ck");
	for(var i = 0; i < cks.length; i++) {
	cks[i].checked = !cks[i].checked;
	}
	}
	function delAll(){
	var ck = $("input:checked[name='ck']");
	if(ck.length == 0){
	alert("请选择,然后进行删除");
	return;
	}
	var f=confirm("确认删除!!");
	if(!f){
	return;
	}
	for(var i = 0; i < ck.length; i++){
	ck[i].parentNode.parentNode.remove();
	}
	}
	</script>
	</head>
	<body>
	<div class="box">
	<table>
	<tr>
	<td>姓名：<input type="text" id="name"></td>
	<td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
	<td>生日：<input type="text" id="birthday"></td>
	<td>住址：
	<select id="city">
	<option value="0">北京</option>
	<option value="1">河南</option>
	</select>
	<select id="region">
	</select>
	</td>
	<td><input type="button" onclick="add()" value="添加" class="btn"></td>
	</tr>
	</table>
	<input type="button" onclick="delAll()" value="批量删除" />
	<input type="button" onclick="che()" value="全选/反选" />
	<table border="1" cellspacing="0" cellpadding="0" class="bg">
	<tr>
	<td><input type="checkbox" onclick="cheAll()" id="che"></td>
	<td>姓名</td>
	<td>性别</td>
	<td>生日</td>
	<td>住址</td>
	<td>操作</td>
	</tr>
	</table>
	</div>
	</body>
	</html>