<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var flag = true;
$(function() {
$("#name").blur(function() {
var name = $("#name").val();
var sp = $("#sp1");
if(name.length < 3 || name.length > 4) {
sp.text("格式不正确");
flag = false;
} else {
sp.text("√");
flag = true;
}
});
$("#mail").blur(function() {
var mail = $("#mail").val();
var sp2 = $("#sp2");
if(mail.match("@")) {
sp2.text("√");
flag = true;
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
var flag = true;
$(function() {
$("#name").blur(function() {
var name = $("#name").val();
var sp = $("#sp1");
if(name.length < 3 || name.length > 4) {
sp.text("格式不正确");
flag = false;
} else {
sp.text("√");
flag = true;
}
});
$("#mail").blur(function() {
var mail = $("#mail").val();
var sp2 = $("#sp2");
if(mail.match("@")) {
sp2.text("√");
flag = true;
} else {
sp2.text("格式不正确");
flag = false;
}
});
$("#tel").blur(function() {
var tel = $("#tel").val();
var sp3 = $("#sp3");
if(tel.length < 8 || tel.length > 11) {
sp2.text("格式不正确");
flag = false;
}
});
$("#tel").blur(function() {
var tel = $("#tel").val();
var sp3 = $("#sp3");
if(tel.length < 8 || tel.length > 11) {
sp3.text("格式不正确");
flag = false;
} else {
sp3.text("√");
flag = true;
}
});
flag = false;
} else {
sp3.text("√");
flag = true;
}
});
$("#btn").click(function() {
if(flag) {
//获取表格
// var tab=document.getElementById("tab");
// var name=document.getElementById("name").value;
// var mail=document.getElementById("mail").value;
// var tel=document.getElementById("tel").value;
// var sheng=document.getElementById("sheng").value;
// var city=document.getElementById("city").value;
//
// var mtr=document.createElement("tr");
// var mtd1=document.createElement("td");
// var mname=document.createTextNode(name);
// mtd1.appendChild(mname);
//
// var mtd2=document.createElement("td");
// var mmail=document.createTextNode(mail);
// mtd2.appendChild(mmail);
//
// var mtd3=document.createElement("td");
// var mtel=document.createTextNode(tel);
// mtd3.appendChild(mtel);
//
// var mtd4=document.createElement("td");
// var cheng=document.createTextNode(sheng);
// mtd4.appendChild(cheng);
//
// var mtd5=document.createElement("td");
// var mcity=document.createTextNode(city);
// mtd5.appendChild(mcity);
// var mtd6=document.createElement("td");
// var btn=document.createElement("button");
// btn.innerText="删除";
// mtd6.appendChild(btn);
//
// mtr.appendChild(mtd1);
// mtr.appendChild(mtd2);
// mtr.appendChild(mtd3);
// mtr.appendChild(mtd4);
// mtr.appendChild(mtd5);
// mtr.appendChild(mtd6);
// tab.appendChild(mtr);
var tab = $("#tab");
var name = $("#name").val();
var mail = $("#mail").val();
var tel = $("#tel").val();
var sheng = $("#pro").val();
var city = $("#ct").val();
//创建tr
var mtr = $("<tr></tr>");
var mtd1 = $("<td>" + name + "</td>");
var mtd2 = $("<td>" + mail + "</td>");
var mtd3 = $("<td>" + tel + "</td>");
var mtd4 = $("<td>" + sheng + "</td>");
var mtd5 = $("<td>" + city + "</td>");
var mtd6 = $("<td><button>删除</button></td>");
mtr.append(mtd1);
mtr.append(mtd2);
mtr.append(mtd3);
mtr.append(mtd4);
mtr.append(mtd5);
mtr.append(mtd6);
tab.append(mtr);
//解除每一次添加绑定的点击事件
//$("button").unbind("click");
//点击删除按钮
$("button").click(function() {
//弹出confirm确定及取消的对话框
var conn = confirm("是否删除");
//默认为true
if(conn) {
//移除
$(this).parent().parent().remove();
}
//取消
conn.cancel();
});
}
});
//创建数组
var shengfen=["北京","河北","山东"];
//二级数组
shengfen["北京"]=["昌平","大兴","海淀"];
shengfen["河北"]=["石家庄","沧州","廊坊"];
shengfen["山东"]=["济南","德州","青岛"];
//当点击省份中的某一个节点
$("#pro").change(function(){
//删除城市列表中第一个optian节点的兄弟节点
$("#shi").siblings().remove();
//查找到省份联动显示的所有城市
var sheng=$(this).val();
//循环遍历省份下所有的城市
for(var i=0;i<shengfen[sheng].length;i++){
//创建option节点
var op=$("<option></option>");
//将选中的城市添加到option中
op.html(shengfen[sheng][i]);
//将option添加父节点
$("#ct").append(op);
}
})
})
</script>
</head>
if(flag) {
//获取表格
// var tab=document.getElementById("tab");
// var name=document.getElementById("name").value;
// var mail=document.getElementById("mail").value;
// var tel=document.getElementById("tel").value;
// var sheng=document.getElementById("sheng").value;
// var city=document.getElementById("city").value;
//
// var mtr=document.createElement("tr");
// var mtd1=document.createElement("td");
// var mname=document.createTextNode(name);
// mtd1.appendChild(mname);
//
// var mtd2=document.createElement("td");
// var mmail=document.createTextNode(mail);
// mtd2.appendChild(mmail);
//
// var mtd3=document.createElement("td");
// var mtel=document.createTextNode(tel);
// mtd3.appendChild(mtel);
//
// var mtd4=document.createElement("td");
// var cheng=document.createTextNode(sheng);
// mtd4.appendChild(cheng);
//
// var mtd5=document.createElement("td");
// var mcity=document.createTextNode(city);
// mtd5.appendChild(mcity);
// var mtd6=document.createElement("td");
// var btn=document.createElement("button");
// btn.innerText="删除";
// mtd6.appendChild(btn);
//
// mtr.appendChild(mtd1);
// mtr.appendChild(mtd2);
// mtr.appendChild(mtd3);
// mtr.appendChild(mtd4);
// mtr.appendChild(mtd5);
// mtr.appendChild(mtd6);
// tab.appendChild(mtr);
var tab = $("#tab");
var name = $("#name").val();
var mail = $("#mail").val();
var tel = $("#tel").val();
var sheng = $("#pro").val();
var city = $("#ct").val();
//创建tr
var mtr = $("<tr></tr>");
var mtd1 = $("<td>" + name + "</td>");
var mtd2 = $("<td>" + mail + "</td>");
var mtd3 = $("<td>" + tel + "</td>");
var mtd4 = $("<td>" + sheng + "</td>");
var mtd5 = $("<td>" + city + "</td>");
var mtd6 = $("<td><button>删除</button></td>");
mtr.append(mtd1);
mtr.append(mtd2);
mtr.append(mtd3);
mtr.append(mtd4);
mtr.append(mtd5);
mtr.append(mtd6);
tab.append(mtr);
//解除每一次添加绑定的点击事件
//$("button").unbind("click");
//点击删除按钮
$("button").click(function() {
//弹出confirm确定及取消的对话框
var conn = confirm("是否删除");
//默认为true
if(conn) {
//移除
$(this).parent().parent().remove();
}
//取消
conn.cancel();
});
}
});
//创建数组
var shengfen=["北京","河北","山东"];
//二级数组
shengfen["北京"]=["昌平","大兴","海淀"];
shengfen["河北"]=["石家庄","沧州","廊坊"];
shengfen["山东"]=["济南","德州","青岛"];
//当点击省份中的某一个节点
$("#pro").change(function(){
//删除城市列表中第一个optian节点的兄弟节点
$("#shi").siblings().remove();
//查找到省份联动显示的所有城市
var sheng=$(this).val();
//循环遍历省份下所有的城市
for(var i=0;i<shengfen[sheng].length;i++){
//创建option节点
var op=$("<option></option>");
//将选中的城市添加到option中
op.html(shengfen[sheng][i]);
//将option添加父节点
$("#ct").append(op);
}
})
})
</script>
</head>
<body>
<form>
<table>
<form>
<table>
<tr>
<td colspan="2" style="text-align: center;">
<h2>添加用户</h2></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" placeholder="请输入用户名" id="name" /></td>
<td><span id="sp1">
</span></td>
</tr>
<tr>
<td>emali:</td>
<td><input type="text" placeholder="请输入邮箱" id="mail" /></td>
<td><span id="sp2">
</span></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="number" placeholder="请输入电话" id="tel" /></td>
<td><span id="sp3">
</span></td>
</tr>
<tr>
<td>省份:</td>
<td>
<select style="width: 150px;" id="pro">
<option>请选择省份</option>
<option value="北京">北京</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
</select>
</td>
</span></td>
</tr>
<tr>
<td>城市:</td>
<td>
<select style="width: 150px;" id="ct">
<option id="shi">请选择城市</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="button" id="btn" value="添加" /></td>
</tr>
</table>
</form>
<table id="tab" border="1px" style="width: 300px; text-align: center;">
<tr>
<td>姓名</td>
<td>emali</td>
<td>电话</td>
<td>省份</td>
<td>城市</td>
<td>操作</td>
</tr>
</table>
</body>
<td colspan="2" style="text-align: center;">
<h2>添加用户</h2></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" placeholder="请输入用户名" id="name" /></td>
<td><span id="sp1">
</span></td>
</tr>
<tr>
<td>emali:</td>
<td><input type="text" placeholder="请输入邮箱" id="mail" /></td>
<td><span id="sp2">
</span></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="number" placeholder="请输入电话" id="tel" /></td>
<td><span id="sp3">
</span></td>
</tr>
<tr>
<td>省份:</td>
<td>
<select style="width: 150px;" id="pro">
<option>请选择省份</option>
<option value="北京">北京</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
</select>
</td>
</span></td>
</tr>
<tr>
<td>城市:</td>
<td>
<select style="width: 150px;" id="ct">
<option id="shi">请选择城市</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="button" id="btn" value="添加" /></td>
</tr>
</table>
</form>
<table id="tab" border="1px" style="width: 300px; text-align: center;">
<tr>
<td>姓名</td>
<td>emali</td>
<td>电话</td>
<td>省份</td>
<td>城市</td>
<td>操作</td>
</tr>
</table>
</body>
</html>