<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<script type="text/javascript" src="../AngularJS库/jquery-2.1.0.min.js" ></script>
<script>
$(function(){
//给按钮添加点击事件
$("#btn").click(function(){
//用户输入的信息
var name = $("input:eq(0)").val();
var email = $("input:eq(1)").val();
var tel = $("input:eq(2)").val();
var flag = true;
if(name==""||name==null){
flag = false;
alert("姓名不能为空");
}
if(email==""||email==null){
flag = false;
alert("email不能为空");
}else{
if(email.indexOf("@")==-1){
flag = false;
alert("email格式不合法");
}
}
if(tel==""||tel==null){
flag = false;
alert("tel不能为空");
}else{
//isNaN(tel) 判断输入的内容管是否为数字
var isNumber = isNaN(tel);
if(isNumber){
flag= false;
alert("tel必须为数字");
}
}
//判断flag
if(flag){
//alert("添加成功");
//创建单元格
var tdName = $("<td>"+name+"</td>");
var tdEmail = $("<td>"+email+"</td>");
var tdTel = $("<td>"+tel+"</td>");
var tdDelete = $("<td><a href='#'>删除</a></td>");
//将上面创建的单元格添加到到tbody里面
var tbody = $("#tbody");
//创建tr
var tr = $("<tr></tr>");
//在tr里面添加上面4个td
tr.append(tdName).append(tdEmail).append(tdTel).append(tdDelete);
//再在tbody里面添加tr
tbody.append(tr);
//删除的点击事件
$("a").click(function(){
//点击超链接,获取到 当前超链接的父元素td的父元素tr,,然后删除tr这一行
var trDelete = $(this).parent().parent();
trDelete.remove();
});
}
});
});
</script>
</head>
<body>
<center>
<h3>添加用户</h3>
<form>
姓名:<input type="text" />
email:<input type="text" />
电话:<input type="text" /><br /><br />
<input type="button" id="btn" value="添加"/>
<br /><br /><hr/><br /><br />
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</form>
</center>
</body>
</html>
</head>
<body>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS库/angular.js" ></script>
<script type="text/javascript" src="../AngularJS库/jquery-2.1.0.min.js" ></script>
<script>
$(function(){
//给按钮添加点击事件
$("#btn").click(function(){
//用户输入的信息
var name = $("input:eq(0)").val();
var email = $("input:eq(1)").val();
var tel = $("input:eq(2)").val();
var flag = true;
if(name==""||name==null){
flag = false;
alert("姓名不能为空");
}
if(email==""||email==null){
flag = false;
alert("email不能为空");
}else{
if(email.indexOf("@")==-1){
flag = false;
alert("email格式不合法");
}
}
if(tel==""||tel==null){
flag = false;
alert("tel不能为空");
}else{
//isNaN(tel) 判断输入的内容管是否为数字
var isNumber = isNaN(tel);
if(isNumber){
flag= false;
alert("tel必须为数字");
}
}
//判断flag
if(flag){
//alert("添加成功");
//创建单元格
var tdName = $("<td>"+name+"</td>");
var tdEmail = $("<td>"+email+"</td>");
var tdTel = $("<td>"+tel+"</td>");
var tdDelete = $("<td><a href='#'>删除</a></td>");
//将上面创建的单元格添加到到tbody里面
var tbody = $("#tbody");
//创建tr
var tr = $("<tr></tr>");
//在tr里面添加上面4个td
tr.append(tdName).append(tdEmail).append(tdTel).append(tdDelete);
//再在tbody里面添加tr
tbody.append(tr);
//删除的点击事件
$("a").click(function(){
//点击超链接,获取到 当前超链接的父元素td的父元素tr,,然后删除tr这一行
var trDelete = $(this).parent().parent();
trDelete.remove();
});
}
});
});
</script>
</head>
<body>
<center>
<h3>添加用户</h3>
<form>
姓名:<input type="text" />
email:<input type="text" />
电话:<input type="text" /><br /><br />
<input type="button" id="btn" value="添加"/>
<br /><br /><hr/><br /><br />
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</form>
</center>
</body>
</html>
</head>
<body>
</body>
</html>