<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title></title>
<style>
.mask{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
display: none;
}
.form-add {
width: 300px;
height: 200px;
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
</style>
<script src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
var shengfen = [["哈尔滨", "齐齐哈尔"], ["威海", "烟台"]];
//给省份选项改变的事件
$("#pro").change(function() {
//清空上次
$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});
var flag = true;
$("#sub").click(function(){
if($("#name").val() === ""){
alert("内容不能为空!");
return flag = false;
}
var ret = /@/;
if(ret.test($("#email").val())){
}else{
alert("邮箱格式不符");
return flag = false;
}
var pw=/^\d{8,11}$/
if(!(pw.test($("#pwd").val()))){
alert("电话号码验证长度在8-11位之间");
return flag = false;
}
if($("#pro").val() === ""){
alert("省份内容不能为空!");
return flag = false;
}
if($("#city").val() === ""){
alert("城市内容不能为空!");
return flag = false;
}
if(flag){
var tr = $("<tr></tr>");
//赋值
if ($("#pro").val()==0) {
var p="黑龙江省";
} else{
var p="山东省";
}
tr.html('<td>'+$("#name").val()+'</td><td>'+$("#email").val()+'</td><td>'+$("#pwd").val()+'</td><td>'+p+'</td><td>'+$("#city").val()+'</td><td><a href="#">Delete</a></td>');
//在房间tbody中
$("#mytable").append(tr);
//bug3:新产生的tr没有时间绑定
tr.find("a").click(function () {
var ab=$(this).parent("td").parent("tr");
var r=confirm("是否删除");
if (r==true){
ab.remove();
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
});
}
});
});
</script>
</head>
<body>
<div class="aa" id="aa">
<form>
<table >
<caption >添加用户
</caption>
<tbody >
<tr>
<td>
姓名
</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>
邮箱
</td>
<td><input type="text" id="email"/></td>
</tr>
<tr>
<td>
电话号码
</td>
<td><input type="text" id="pwd"/></td>
</tr>
<tr>
<td>
省份
</td>
<td>
<select id="pro">
<option>---请选择省份</option>
<option value="0">黑龙江省</option>
<option value="1">山东省</option>
</select>
</td>
</tr>
<tr>
<td>
城市
</td>
<td>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="添加" id="sub" οnclick="show()"/>
</td>
</tr>
</tbody>
</table>
</form>
<br/>
<table border="1px">
<tbody id="mytable">
<tr>
<td>
账号
</td>
<td>邮箱</td>
<td>
电话号码
</td>
<td>
省份
</td>
<td>
城市
</td>
<td>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title></title>
<style>
.mask{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
display: none;
}
.form-add {
width: 300px;
height: 200px;
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
</style>
<script src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){
var shengfen = [["哈尔滨", "齐齐哈尔"], ["威海", "烟台"]];
//给省份选项改变的事件
$("#pro").change(function() {
//清空上次
$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});
var flag = true;
$("#sub").click(function(){
if($("#name").val() === ""){
alert("内容不能为空!");
return flag = false;
}
var ret = /@/;
if(ret.test($("#email").val())){
}else{
alert("邮箱格式不符");
return flag = false;
}
var pw=/^\d{8,11}$/
if(!(pw.test($("#pwd").val()))){
alert("电话号码验证长度在8-11位之间");
return flag = false;
}
if($("#pro").val() === ""){
alert("省份内容不能为空!");
return flag = false;
}
if($("#city").val() === ""){
alert("城市内容不能为空!");
return flag = false;
}
if(flag){
var tr = $("<tr></tr>");
//赋值
if ($("#pro").val()==0) {
var p="黑龙江省";
} else{
var p="山东省";
}
tr.html('<td>'+$("#name").val()+'</td><td>'+$("#email").val()+'</td><td>'+$("#pwd").val()+'</td><td>'+p+'</td><td>'+$("#city").val()+'</td><td><a href="#">Delete</a></td>');
//在房间tbody中
$("#mytable").append(tr);
//bug3:新产生的tr没有时间绑定
tr.find("a").click(function () {
var ab=$(this).parent("td").parent("tr");
var r=confirm("是否删除");
if (r==true){
ab.remove();
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
});
}
});
});
</script>
</head>
<body>
<div class="aa" id="aa">
<form>
<table >
<caption >添加用户
</caption>
<tbody >
<tr>
<td>
姓名
</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>
邮箱
</td>
<td><input type="text" id="email"/></td>
</tr>
<tr>
<td>
电话号码
</td>
<td><input type="text" id="pwd"/></td>
</tr>
<tr>
<td>
省份
</td>
<td>
<select id="pro">
<option>---请选择省份</option>
<option value="0">黑龙江省</option>
<option value="1">山东省</option>
</select>
</td>
</tr>
<tr>
<td>
城市
</td>
<td>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="添加" id="sub" οnclick="show()"/>
</td>
</tr>
</tbody>
</table>
</form>
<br/>
<table border="1px">
<tbody id="mytable">
<tr>
<td>
账号
</td>
<td>邮箱</td>
<td>
电话号码
</td>
<td>
省份
</td>
<td>
城市
</td>
<td>
</td>
</tr>
</tbody>
</table>
</body>
</html>