HTML5_添加用户信息的操作以及省份城市二级联动
来源：互联网 发布：mac输入法切换中英文 编辑：程序博客网 时间：2024/05/17 12:03
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
<style>
span{
font-family: 楷体;
font-size: 14px;
color: red;
}
select{
width: 150px;
height: 20px;
}
a{
text-decoration: none;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
//angularjs处理省级联动
angular.module("app",[]).controller("mycontr",function($scope){
$scope.shengname=["北京","江苏","河南"];
$scope.selectCh=function(){
var yxsheng=$scope.yixuansheng;
if(yxsheng==="北京"){
$scope.shiarr=["房山","黄埔","朝阳","海淀"];
}else if("江苏"===yxsheng){
$scope.shiarr=["苏州","淮安","宿迁","南京"];
}else if("河南"===yxsheng){
$scope.shiarr=["安阳","郑州","洛阳","驻马店"];
}
}
});
$(function(){
//点击按钮验证判断
$("#but").click(function(){
var name=$("#name").val();
var email=$("#email").val();
var tel=$("#tel").val();
var sheng=$("#sheng option:selected").val();
var shi=$("#shi option:selected").val();
var mytable=$("#mytable");
var kai1=false;
var kai2=false;
var kai3=false;
if(name!=null&name!=""){
kai1=true;
}
if(email.match("@")){
kai2=true;
}
var tt=parseInt(tel);
if(tel==tt&tel.length==11){
kai3=true;
}
if(kai1&kai2&kai3){
var tr=$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td>"+sheng+"</td><td>"+shi+"</td><td><a href='#' onclick='shan(this)'>Delete</a></td></tr>");
mytable.append(tr);
mytable[0].style.display="block";
}else{
alert("姓名或email或电话 验证不通过!")
}
});
});
//点击删除
function shan(obj){
var tr=$(obj).parent().parent();
tr.remove();
var size=$("#mytable tr").length;
if(size==1){
$("#mytable")[0].style.display="none";
}
// alert(size)
}
</script>
</head>
<body>
<form>
<table width="400px" style="margin: auto;" ng-controller="mycontr">
<tr>
<td colspan="2" style="text-align: center;"><h2>添加用户</h2></td>
</tr>
<tr style="text-align: center;">
<td>姓名:</td>
<td><input type="text" id="name" placeholder="请输入用户名" />
<span></span>
</td>
</tr>
<tr style="text-align: center;">
<td>email:</td>
<td><input type="text" id="email" placeholder="请输入email"/>
<span></span>
</td>
</tr>
<tr style="text-align: center;">
<td>电话:</td>
<td><input type="text" id="tel" placeholder="请输入手机号"/>
<span></span>
</td>
</tr>
<tr style="text-align: center;">
<td>省份:</td>
<td>
<select id="sheng" ng-change="selectCh()" ng-model="yixuansheng">
<option value="" style="display: none;">---请选择---</option>
<option ng-repeat="ss in shengname">{{ss}}</option>
</select>
</td>
</tr>
<tr style="text-align: center;">
<td>城市:</td>
<td>
<select id="shi">
<option value="" style="display: none;">---请选择---</option>
<option ng-repeat="shi in shiarr">{{shi}}</option>
</select>
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" id="but" value="添加"/> </td>
</tr>
</table>
</form>
<br />
<br />
<table width="500px" border="1" id="mytable" style="margin: auto;display: none;">
<tr style="text-align: center;">
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>删除</th>
</tr>
</table>
</body>
</html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
<style>
span{
font-family: 楷体;
font-size: 14px;
color: red;
}
select{
width: 150px;
height: 20px;
}
a{
text-decoration: none;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
//angularjs处理省级联动
angular.module("app",[]).controller("mycontr",function($scope){
$scope.shengname=["北京","江苏","河南"];
$scope.selectCh=function(){
var yxsheng=$scope.yixuansheng;
if(yxsheng==="北京"){
$scope.shiarr=["房山","黄埔","朝阳","海淀"];
}else if("江苏"===yxsheng){
$scope.shiarr=["苏州","淮安","宿迁","南京"];
}else if("河南"===yxsheng){
$scope.shiarr=["安阳","郑州","洛阳","驻马店"];
}
}
});
$(function(){
//点击按钮验证判断
$("#but").click(function(){
var name=$("#name").val();
var email=$("#email").val();
var tel=$("#tel").val();
var sheng=$("#sheng option:selected").val();
var shi=$("#shi option:selected").val();
var mytable=$("#mytable");
var kai1=false;
var kai2=false;
var kai3=false;
if(name!=null&name!=""){
kai1=true;
}
if(email.match("@")){
kai2=true;
}
var tt=parseInt(tel);
if(tel==tt&tel.length==11){
kai3=true;
}
if(kai1&kai2&kai3){
var tr=$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+tel+"</td><td>"+sheng+"</td><td>"+shi+"</td><td><a href='#' onclick='shan(this)'>Delete</a></td></tr>");
mytable.append(tr);
mytable[0].style.display="block";
}else{
alert("姓名或email或电话 验证不通过!")
}
});
});
//点击删除
function shan(obj){
var tr=$(obj).parent().parent();
tr.remove();
var size=$("#mytable tr").length;
if(size==1){
$("#mytable")[0].style.display="none";
}
// alert(size)
}
</script>
</head>
<body>
<form>
<table width="400px" style="margin: auto;" ng-controller="mycontr">
<tr>
<td colspan="2" style="text-align: center;"><h2>添加用户</h2></td>
</tr>
<tr style="text-align: center;">
<td>姓名:</td>
<td><input type="text" id="name" placeholder="请输入用户名" />
<span></span>
</td>
</tr>
<tr style="text-align: center;">
<td>email:</td>
<td><input type="text" id="email" placeholder="请输入email"/>
<span></span>
</td>
</tr>
<tr style="text-align: center;">
<td>电话:</td>
<td><input type="text" id="tel" placeholder="请输入手机号"/>
<span></span>
</td>
</tr>
<tr style="text-align: center;">
<td>省份:</td>
<td>
<select id="sheng" ng-change="selectCh()" ng-model="yixuansheng">
<option value="" style="display: none;">---请选择---</option>
<option ng-repeat="ss in shengname">{{ss}}</option>
</select>
</td>
</tr>
<tr style="text-align: center;">
<td>城市:</td>
<td>
<select id="shi">
<option value="" style="display: none;">---请选择---</option>
<option ng-repeat="shi in shiarr">{{shi}}</option>
</select>
</td>
</tr>
<tr style="text-align: center;">
<td colspan="2"><input type="submit" id="but" value="添加"/> </td>
</tr>
</table>
</form>
<br />
<br />
<table width="500px" border="1" id="mytable" style="margin: auto;display: none;">
<tr style="text-align: center;">
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>删除</th>
</tr>
</table>
</body>
</html>
阅读全文
0 0
- HTML5_添加用户信息的操作以及省份城市二级联动
- js城市省份二级联动
- js的二级联动实现省份城市的选择
- 省份城市jquery简单的二级联动,query代码
- Ajax实现省份-城市二级下拉联动
- android 二级联动，省份和城市
- 省份城市二级联动【DOM+js+XML】
- 省份城市实现二级联动效果
- 省份城市联动的例子
- 省市二级联动 通过省份选择城市 JS的简单应用 二级下拉列表
- 城市的二级联动
- js中的数组应用小案例——省份城市的二级联动
- DOM练习3-二级联动菜单(选择省份城市)
- 【js】使用xml数据载体实现城市省份二级联动
- 省份和城市的二级列表
- 省份,城市联动显示
- 省份城市联动
- 省份城市联动 多选
- unity AR扫描shader
- MDK功能详细介绍
- anyproxy批量自动采集微信公众号文章
- 破解intelliJ idea 2017
- 成为设计师10年后的经验心得
- HTML5_添加用户信息的操作以及省份城市二级联动
- Python学习笔记---环境变量搭建（Window）
- 关于jquery mobile.js 框架 引入过程中，框架自身css 样式影响页面样式解决方法
- PHP各版本差异 5.2——7.0
- Q3数据中心面积增长近5成，三大驱动力持续扩大万国数据领先优势
- xUtils单线程断点续传
- 极简主义设计的魅力在哪里
- Mac 安装 node.js
- windows下ELF学习总结
