表格失焦+二级联动(angularjs)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var flag1=false;
var flag2=false;
var flag3=false;

 $("#name").blur(function(){
  var $name=this.value;
  if($name==null||$name==""){
  $("span").eq(0).html("不能为空");
  flag1=false;
  }else{
  flag1=true;
  $("span").eq(0).hide();
  }
 });
$("#email").blur(function(){
var $email=this.value;
var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(myreg.test($email)){
flag2=true;
$("span").eq(1).hide();
}else{
$("span").eq(1).html("格式不正确");
flag2=false;
}

});
$("#tel").blur(function(){
var $tel=this.value;
if($tel.length>8&&$tel.length<11){
flag3=true;
$("span").eq(2).hide();
}else{
$("span").eq(2).html("格式不正确");
flag3=false;
}
});

$("button").click(function(){
if(flag1&&flag2&&flag3){
var $name=$("#name").val();
var $email=$("#email").val();
var $tel=$("#tel").val();
var $p=$("#se1").val();
var $s=$("#se2").val();
var mytr=$("<tr></tr>");
var td1=$("<td>"+$name+"</td>");
var td2=$("<td>"+$email+"</td>");
var td3=$("<td>"+$tel+"</td>");
 var td4=$("<td>"+$p+"</td>");
 var td5=$("<td>"+$s+"</td>");
var td6=$("<td><button>删除</button></td>");
mytr.append(td1);
mytr.append(td2);
 mytr.append(td3); 
  mytr.append(td4); 
   mytr.append(td5); 
    mytr.append(td6); 
    
$("#mybody").append(mytr);
$("#mybody button").click(function(){

var aa=confirm("确定删除?")
if(aa){
$(this).parent().parent().remove();
}
});
 
}



});


});

</script>
<script src="lib/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",["$scope",function(myscope){
myscope.change=function(){
if(myscope.mm=="北京"){
myscope.list=["朝阳","海淀","昌平"];

}else if(myscope.mm=="山西"){
myscope.list=["太原","晋城","大同"];
}else if(myscope.mm=="河北"){
myscope.list=["廊坊","石家庄","保定"];
}

};

}]);

</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<title>添加用户</title>

<h3>添加用户名</h3>
<table>
<tr>
<td>姓名<input type="text" id="name"/><span></span></td>
</tr>
<tr>
<td>email<input type="email" id="email"/><span></span></td>
</tr>
<tr>
<td>电话<input type="tel" id="tel"/><span></span></td>
</tr>
<tr>
<td>
<select  ng-change="change()" ng-model="mm" id="se1">
  <option >请选择省份</option>
  <option >北京</option>
  <option >山西</option>
  <option >河北</option>
 </select>
</td>
</tr>
<tr>
<td>  <select id="se2">
  <option ng-repeat="d in list">{{d}}</option>
 </select> </td>
</tr>
<tr>
<td><button>添加</button></td>
</tr>


</table>
<br />

<table border="1px">
<form>
<thead>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>操作</th>
</thead>
<tbody id="mybody">

</tbody>

</form>
</table>

</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值