jQuery用户信息的添加和删除

来源：互联网发布：saas软件服务编辑：程序博客网时间：2024/05/20 21:20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>用户信息的添加与删除</title><script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script><script type="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(7>size>12 ){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);//根据添加的信息创建行标签trvar $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);//弹出“是否确认删除”的提示对话框，设置标志位flagvar flag = window.confirm("是否确认删除："+name);//判断标志位flag代表的情况是否正确if(flag){//确定删除时，就删除整行数据，表示flag为false。并弹出“用户信息已被删除”的提示$Del.parent().parent().remove();alert("用户 "+name+" 的信息已被删除");return false;}else{return false;}}}})});</script></head><center></center><!-- 用户信息添加表 -->姓名：</td><input type="text" name="name" id="nameid" placeholder="请输入用户名" /></td>email：<input type="email" name="email" id="emailid" placeholder="请输入邮箱号"/></td>电话：<input type="tel" name="tel" id="telid" placeholder="请输入电话号码" /></td><input type="submit" value="提交" id="sub"/></td><!-- 用户信息展示表 --><table align="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><tbody id="tbody" align="center"></tbody></table></body></html>
阅读全文
0 0