用户信息的添加与删除
来源:互联网 发布:一般淘宝哪些假货多 编辑:程序博客网 时间:2024/05/18 03:16
<!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 email = $("#emailid").val();
var tel = $("#telid").val();
//根据添加的信息创建表示列的双标签td(第一种方法)
var $nametd = $("<td>"+name+"</td>");
var $emailtd = $("<td>"+email+"</td>");
var $teltd = $("<td>"+tel+"</td>");
var $deletetd = $("<td/>");
//根据添加的信息创建表示列的单标签td,把内容用.text()方法显示(第二种方法)
/* var $nametd = $("<td/>");
$nametd.text(name);
var $emailtd = $("<td/>");
$emailtd.text(email);
var $teltd = $("<td/>");
$teltd.text(tel);
var $deletetd = $("<td/>");*/
//创建根据用户姓名删除信息的td列超链接标签
var $Del = $("<a>"+"Delete"+"</a>");
//.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">
<!-- 用户信息添加表 -->
<palign="center">添加用户:</p>
<palign="center">
姓名:<inputtype="text"name="name"id="nameid" />
email:<inputtype="text"name="email"id="emailid" />
电话:<inputtype="text"name="tel"id="telid" />
</p>
<palign="center">
<inputtype="submit"value="提交"id="sub"/>
</p><br/>
<!-- 用户信息展示表 -->
<tablealign="center"id="tableid"border="1px"width="400px"bordercolor="grey"cellpadding="1px"cellspacing="0px">
<theadalign="center">
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th>删除</th>
</tr>
</thead>
<tbodyid="tbody"align="center"></tbody>
</table>
</body>
</html>
阅读全文
0 0
- 用户信息的添加与删除
- 用户信息的添加与删除(表格)
- jQuery用户信息的添加和删除
- jQuery实现用户信息表格的添加、删除操作
- 用户信息表练习/删除/全选/添加
- Jimoshi_整合三大框架(二)--添加用户信息数据、删除用户信息数据、修改用户信息数据
- 快捷方式的添加与删除
- 路由的添加与删除
- Cookie 的添加与删除
- Cookie 的添加与删除
- 添加用户信息
- james邮件服务器的用户信息添加
- james邮件服务器的用户信息添加
- 用户信息的增删改查:非空验证添加,模糊查询,修改密码,批量和全部删除
- SharePoint站点中用户信息与AD用户信息的“不一致”问题
- 默认共享的添加与删除策略
- 多行添加与删除的实现
- JList的修改、删除与添加
- 洛谷 P2038 无线网络发射器选址
- web笔记(10/13)-----课程内容
- Mybatis介绍
- AJAX 实现省市县地名三级联动
- <错排>codevs 1697 ⑨要写信
- 用户信息的添加与删除
- 算法分析与设计丨第六周丨LeetCode(10)——Best Time to Buy and Sell Stock(Easy)
- ArcSDE与SQL sevrver的连接、ArcSDE导入数据、ArcGIS Server发布地图服务
- sudo chown -R $(whoami) /usr/local/lib/pkgconfig
- JavaScript定时函数
- BZOJ[3378][Usaco2004 Open]MooFest 狂欢节 树状数组
- HDU1520-Anniversary party(树形dp)
- 学习插入排序
- 体验店员工绩效考核表