核心提示：添加数据传表格代码教程 !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleTitle/titlescript src=jquery-2.1.0.j...
添加数据传表格代码教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="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 (tel.length ==11)
{
flag2 = true;
}else {
alert("tel不否和手机号")
flag2 = false;
}
if(flag1 && flag2 && flag3){
var tdName = $("<td>"+name+"</td>");
var tdEmail = $("<td>"+email+"</td>");
var tdTel = $("<td>"+tel+"</td>");
var tdA = $("<td><a href='#'>删除</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">
<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>
