angularjs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.0.min.js"></script>
<script src="angular-1.5.5/angular.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ok1 = false;
var ok2 = false;
var ok3 = false;
var ok4 = false;
var name = $("#name").html();
$("#go").click(function() {
if($("#name").val().length >= 1 && $("#name").val() != '') {
ok1 = true;
}
var a = /@/;
if($("#email").val() != "" && a.test($("#email").val())) {
ok2 = true;
}
if($("#tel").val().length >= 8 && $("#tel").val().length <= 11 && $("#tel").val() != "") {
ok3 = true;
}
if(ok1 && ok2 && ok3) {
var table = $("tbody");
var tr = $("<tr></tr>");
table.append(tr);
var td1 = $("<td>" + $("#name").val() + "</td>");
var td2 = $("<td>" + $("#email").val() + "</td>");
var td3 = $("<td>" + $("#tel").val() + "</td>");
var td4 = $("<td>" + $("#province").val() + "</td>");
var td5 = $("<td>" + $("#city").val() + "</td>");
var td6 = $("<td><button onclick='shan(this)'>删除</button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
} else {
alert("格式不正确");
}
});
});
function shan(a) {
a.parentNode.parentNode.remove();
}
///////////////////////////////////////////////
var app = angular.module("xskapp", []);
app.controller("dome",["$scope", function(shuai) {
shuai.xuan = function() {
if(shuai.kang =="山东") {
shuai.base1 = ["德州", "济南"]
} else if(shuai.kang=="北京") {
shuai.base1 = ["海淀", "朝阳", "东城"]
} else if(shuai.kang=="河北") {
shuai.base1 = ["邯郸", "廊坊", "保定"]
}
}
}]);
</script>
</head>
<body ng-app="xskapp" ng-controller="dome">
<h3>添加用户</h3>
<br />
<br/> 姓名
<input type="text" id="name" />
<br />
<br/> Email
<input type="text" id="email" />
<br />
<br/> 电话
<input type="text" id="tel" />
<br />
<br />
<br/> 省份
<select class="se1" id="province" ng-change="xuan()" ng-model="kang">
<!--定义省份下拉列表-->
<option >山东</option>
<option >河北</option>
<option >北京</option>
</select>
<br />城市
<select class="se2" id="city">
<!--定义城市下拉列表-->
<option ng-repeat=" list in base1">{{list}}</option>
</select>
<input type="button" id="go" value="添加" />
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>Email</th>
<th>电话</th>
<th>省份</th>
<th>城市</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function() {
$("#btn").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var tel = $("#tel").val();
var pro = $("#province option:checked").html();
var city = $("#city").val();
if(name == ""||name == null) {
alert("姓名不能为空");
return false;
}
if(!email.match("@")) {
alert("email格式不正确");
return false;
}
var a = /\d{8,11}/;
if(!a.test(tel)) {
alert("电话格式不正确");
return false;
}
if(pro=="----请选择----"){
alert("省份为必选项");
return false;
}
if(city=="----请选择----"){
alert("城市为必选项");
return false;
}
var table = $("table");
var tr = $("<tr></tr>");
var td1 = $("<td>" + name + "</td>");
var td2 = $("<td>" + email + "</td>");
var td3 = $("<td>" + tel + "</td>");
var td4 = $("<td>"+pro+"</td>");
var td5 = $("<td>"+city+"</td>");
var td6 = $("<td><button id='btn1'>删除</button></td>");
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
table.append(tr);
$("td").children("button").click(function(){
alert(00);
this.parentNode.parentNode.remove();
});
});
$("#province").change(function() {
var data = [
["海淀", "东城", "朝阳"],
["廊坊", "保定", "邯郸"]
];
$("#shan").siblings().remove();
for(var i = 0; i < data.length; i++) {
var datas = $(this).val();
var tianjia = $("<option>" + data[datas][i] + "</option>");
$("#city").append(tianjia);
}
});
});
</script>
</head>
<body>
<h3>添加用户</h3> 姓名
<input type="text" id="name" /> email
<input type="text" id="email" /> 电话
<input type="text" id="tel" /> 省份
<select id="province">
<option>----请选择----</option>
<option value="0">北京</option>
<option value="1">河北</option>
</select>
城市
<select id="city">
<option id="shan">----请选择----</option>
</select>
<input type="button" id="btn" value="添加" />
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>email</th>
<th>姓电话名</th>
<th>省份</th>
<th>城市</th>
<th>操作</th>
</tr>
</table>
</body>
</html>