<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
border: 1px;
width: 300px;
margin: 0 auto;
}
span{
display: none;
}
table{
margin: 0 auto;
display: none;
}
</style>
<!--Jquery代码-->
<script src="js/jquery-1.11.1.js"></script>
<script>
//工厂函数
$(function(){
//定义联动的数组
var provinces = [["保定","石家庄","邯郸"],["深圳","广州","惠州"]];
$("#prov").change(function(){
//清空上次
$("#citys").siblings().remove();
var prov = $(this).val();
for(var i=0;i<provinces[prov].length;i++){
var opt = $("<option></option>");
opt.html(provinces[prov][i]+"");
$("#city").append(opt);
}
});
//添加的点击事件
$("input").eq(3).click(function(){
flag0 = false;
flag1 = false;
flag2 = false;
flag3 = false;
flag4 = false;
//获取姓名输入框中的值
var $sname = $("input").eq(0).val();
//判断输入的内容
if($sname!=""&&$sname!=null){
var $td0 = $("<td>"+$sname+"</td>");
flag0=true;
}else{
flag0=false;
$("span").eq(0).html("用户名不能为空");
$("span").eq(0).show();
}
//获取邮箱输入的值
var $semail = $("input").eq(1).val();
//判断邮箱输入值
if($semail.indexOf("@")!=-1){
var $td1 = $("<td>"+$semail+"</td>");
flag1=true;
}else{
flag1=false;
}
//获取电话输入的值
var $stel = $("input").eq(2).val();
//判断电话输入值
var yztex = /^\d{8,11}$/
if(yztex.test($stel)){
var $td2 = $("<td>"+$stel+"</td>");
flag2=true;
}else{
flag2=false;
}
//获取省份输入的值
var $ssheng = $("#prov option:checked").html();
//判断省份输入值
if($ssheng!=null&&$ssheng!=""){
var $td3 = $("<td>"+$ssheng+"</td>");
flag3=true;
}else{
flag3=false;
}
//获取省份输入的值
var $shi = $("#city option:checked").html()
//判断省份输入值
if($shi!=null&&$shi!=""){
var $td4 = $("<td>"+$shi+"</td>");
flag4=true;
}else{
flag4=false;
alert("市不能为空");
}
if(flag0&&flag1&&flag2&&flag3&&flag4){
$("table").show();
var $td5 = $("<td><a href='#'>delete</a></td>");
var $tr = $("<tr bgcolor='white'></tr>")
$tr.append($td0);
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
$tr.append($td4);
$tr.append($td5);
$("table").append($tr);
}else{
alert("输入数据不符");
}
$("a").click(function(){
var $ta = $(this);
var bol=confirm("是否删除");
if(bol==true){
$ta.parent().parent().remove();
if($("tr").length==1){
$("table").hide();
}
}
$ta.stopPropagation();
return false;
});
});
});
</script>
</head>
<body>
<div>
<form>
<!--姓名-->
<label>姓 名:</label>
<input type="text" placeholder="请输入不为空的用户名" />
<br />
<!--邮箱-->
<label> email :</label>
<input type="text" placeholder="请输入合法邮箱'@'" />
<br />
<!--电话-->
<label>电 话:</label>
<input type="tel" placeholder="请输入8-11位手机号" />
<br />
<!--省份-->
<label>省 份:</label>
<select id="prov">
<option>-请选择省份-</option>
<option value="0">河北</option>
<option value="1">广东</option>
</select>
<br />
<!--城市-->
<label>城 市:</label>
<select id="city">
<option id="citys">-请选择市份-</option>
</select>
<br />
<input type="button" value="添加" />
</form>
</div>
<p></p>
<table border="0px" bgcolor="black" cellspacing="1px" style="width: 500px; text-align: center;">
<tr bgcolor="white">
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>删除</th>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
border: 1px;
width: 300px;
margin: 0 auto;
}
span{
display: none;
}
table{
margin: 0 auto;
display: none;
}
</style>
<!--Jquery代码-->
<script src="js/jquery-1.11.1.js"></script>
<script>
//工厂函数
$(function(){
//定义联动的数组
var provinces = [["保定","石家庄","邯郸"],["深圳","广州","惠州"]];
$("#prov").change(function(){
//清空上次
$("#citys").siblings().remove();
var prov = $(this).val();
for(var i=0;i<provinces[prov].length;i++){
var opt = $("<option></option>");
opt.html(provinces[prov][i]+"");
$("#city").append(opt);
}
});
//添加的点击事件
$("input").eq(3).click(function(){
flag0 = false;
flag1 = false;
flag2 = false;
flag3 = false;
flag4 = false;
//获取姓名输入框中的值
var $sname = $("input").eq(0).val();
//判断输入的内容
if($sname!=""&&$sname!=null){
var $td0 = $("<td>"+$sname+"</td>");
flag0=true;
}else{
flag0=false;
$("span").eq(0).html("用户名不能为空");
$("span").eq(0).show();
}
//获取邮箱输入的值
var $semail = $("input").eq(1).val();
//判断邮箱输入值
if($semail.indexOf("@")!=-1){
var $td1 = $("<td>"+$semail+"</td>");
flag1=true;
}else{
flag1=false;
}
//获取电话输入的值
var $stel = $("input").eq(2).val();
//判断电话输入值
var yztex = /^\d{8,11}$/
if(yztex.test($stel)){
var $td2 = $("<td>"+$stel+"</td>");
flag2=true;
}else{
flag2=false;
}
//获取省份输入的值
var $ssheng = $("#prov option:checked").html();
//判断省份输入值
if($ssheng!=null&&$ssheng!=""){
var $td3 = $("<td>"+$ssheng+"</td>");
flag3=true;
}else{
flag3=false;
}
//获取省份输入的值
var $shi = $("#city option:checked").html()
//判断省份输入值
if($shi!=null&&$shi!=""){
var $td4 = $("<td>"+$shi+"</td>");
flag4=true;
}else{
flag4=false;
alert("市不能为空");
}
if(flag0&&flag1&&flag2&&flag3&&flag4){
$("table").show();
var $td5 = $("<td><a href='#'>delete</a></td>");
var $tr = $("<tr bgcolor='white'></tr>")
$tr.append($td0);
$tr.append($td1);
$tr.append($td2);
$tr.append($td3);
$tr.append($td4);
$tr.append($td5);
$("table").append($tr);
}else{
alert("输入数据不符");
}
$("a").click(function(){
var $ta = $(this);
var bol=confirm("是否删除");
if(bol==true){
$ta.parent().parent().remove();
if($("tr").length==1){
$("table").hide();
}
}
$ta.stopPropagation();
return false;
});
});
});
</script>
</head>
<body>
<div>
<form>
<!--姓名-->
<label>姓 名:</label>
<input type="text" placeholder="请输入不为空的用户名" />
<br />
<!--邮箱-->
<label> email :</label>
<input type="text" placeholder="请输入合法邮箱'@'" />
<br />
<!--电话-->
<label>电 话:</label>
<input type="tel" placeholder="请输入8-11位手机号" />
<br />
<!--省份-->
<label>省 份:</label>
<select id="prov">
<option>-请选择省份-</option>
<option value="0">河北</option>
<option value="1">广东</option>
</select>
<br />
<!--城市-->
<label>城 市:</label>
<select id="city">
<option id="citys">-请选择市份-</option>
</select>
<br />
<input type="button" value="添加" />
</form>
</div>
<p></p>
<table border="0px" bgcolor="black" cellspacing="1px" style="width: 500px; text-align: center;">
<tr bgcolor="white">
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>删除</th>
</tr>
</table>
</body>
</html>