Jquery添加用户使用

来源：互联网发布：怎样检查电脑网络设置编辑：程序博客网时间：2024/05/16 17:03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jQuery-2.1.0/jquery-2.1.0.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 flag1 = flag2 = flag3 = true;

if(name == null || name ==""){
alert("用户名不能为空");
flag1 = false;
}else{
flag1 = true;
}
//验证邮箱
var reg = /@/;
var isEmail = reg.test(email);
if(!isEmail){
alert("email不符合格式");
flag2 = false;
}else{
flag2 = true;
}
//验证电话为纯数字
var isNumber = isNaN(tel);
if(isNumber){
alert("tel必须为数字");
flag3 = false;
}else{
flag3 = true;
}
if(flag1 && flag2 && flag3){
//alert("tianjia ");
//创建单元格
var tdName = $("<td>"+name+"</td>");
var tdEmail = $("<td>"+email+"</td>");
var tdTel = $("<td>"+tel+"</td>");
var tdA = $("<td><a href='#'>删除</a></td>");

$("<tr></tr>").append(tdName).append(tdEmail).append(tdTel).append(tdA).appendTo($("tbody"));

$("a").click(function(){
var tr = $(this).parent().parent();
if(confirm("是否删除:"+tr.children().eq(0).html())){
tr.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>

阅读全文

0 0