用户信息的添加与删除（表格）

来源：互联网发布：大众软件 9几年编辑：程序博客网时间：2024/05/10 04:20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>用户信息的添加与删除</title>
<scripttype="text/javascript"src="../jquery-2.1.0.js"></script>
<scripttype="text/javascript">
$(function(){
//用户信息提交时触发的点击事件
$("#sub").click(function(){

//获取添加的用户信息
var name = $("#nameid").val();
var tel = $("#telid").val();

//正则表达式 search 判断输入内容是否包含@
var email = $("#emailid").val();
var v ="@";
var s = email.search(v);
var size = tel.length;

//1. 点击添加按钮，获得用户姓名名称，验证不为空
if(name == null || name == ""){
alert("用户姓名不能为空");
}

//2. 获得email，验证邮箱格式正确（包含@符号）
else if(s<0){
alert("邮箱格式不正确（必须包含@符号）");
}

//3. 获得电话，验证长度在7-11位之间
else if( 0<size< 7 || size > 11 ){
alert("电话号码长度必须在7-11位之间");
}
else{
//根据添加的信息创建表示列的双标签td（第一种方法）
var $nametd = $("<td>"+name+"</td>");
var $emailtd = $("<td>"+email+"</td>");
var $teltd = $("<td>"+tel+"</td>");
var $deletetd = $("<td/>");

//创建根据用户姓名删除信息的td列超链接标签
var $Del = $("<button>"+"Delete"+"</button>");
//.prop()方法用于设置或返回当前jQuery对象所匹配的元素属性值
$Del.prop("href","deletefrom?name="+name);
//将删除的超链接标签放到“删除”列中
$deletetd.append($Del);

//根据添加的信息创建行标签tr
var $tr = $("<tr></tr>");
//把创建的列标签放到行标签tr中显示
$tr.append($nametd).append($emailtd).append($teltd).append($deletetd);
//把创建好的行标签tr放到表格主体中显示
$("#tbody").append($tr);

//通过超链接点击“删除”时，执行信息的删除方法操作
$Del.click(function(){
return deleteTr($Del);
});

//定义删除信息方法的函数操作
function deleteTr($Del){
//找到删除的超链接对应的元素父节点的子节点，并弹出提示框
var name = $Del.parent().parent().children().eq(0).text();
alert("您现在选择删除的用户是："+name);
//弹出“是否确认删除”的提示对话框，设置标志位flag
var flag = window.confirm("是否确认删除："+name);
//判断标志位flag代表的情况是否正确
if(flag){
//确定删除时，就删除整行数据，表示flag为false。并弹出“用户信息已被删除”的提示
$Del.parent().parent().remove();
alert("用户 "+name+" 的信息已被删除");
return false;
}else{
return false;
}
}
}
})
});
</script>
</head>

<bodybgcolor="#66FF00">
<center></center>

<tablealign="center"id="tableid"border="1px"width="400px"bordercolor="grey"cellpadding="1px"cellspacing="0px">
<caption>用户信息表</caption><br/> <br/>
<theadalign="center">
<tr>
<tdalign="right">姓名：</td>
<tdalign="left"><inputtype="text"name="name"id="nameid"placeholder="请输入用户名" /></td>
</tr>
<tr>
<tdalign="right">email：</td>
<tdalign="left"><inputtype="email"name="email"id="emailid"placeholder="请输入邮箱号"/></td>
</tr>
<tr>
<tdalign="right">电话：</td>
<tdalign="left"><inputtype="tel"name="tel"id="telid"placeholder="请输入电话号码" /></td>
</tr>
<tralign="center">
<tdcolspan="2"><inputtype="submit"value="提交"id="sub"/></td>
</tr>
</table><br/><br/>


<tablealign="center"id="tableid"border="1px"width="400px"bordercolor="grey"cellpadding="1px"cellspacing="0px">
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>删除</th>
</tr>
</thead>
<tbodyid="tbody"align="center"></tbody>
</table>
</body>
</html>

阅读全文

0 0