document 例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn_ID").onclick=function(){
/* alert("213");*/
//获取文本框的值
var nameValue=document.getElementById("userid").value;
var EValue=document.getElementById("EID").value;
var PhoneValue=document.getElementById("PhoenID").value;
// alert(EValue);
//获取td
var nameTD=document.createElement("td");
var nameText=document.createTextNode(nameValue);
nameTD.appendChild(nameText); var ETD=document.createElement("td");
var EText=document.createTextNode(EValue);
ETD.appendChild(EText); var PhoneTD=document.createElement("td");
var PhoneText=document.createTextNode(PhoneValue);
PhoneTD.appendChild(PhoneText); var DelTD=document.createElement("td");
var aElement=document.createElement("a");
aElement.setAttribute("href","deleteEmp?id="+nameValue);
var DelText=document.createTextNode("删除");
aElement.appendChild(DelText);
DelTD.appendChild(aElement); //增加tr 把td增加到tr上
var tr=document.createElement("tr");
tr.appendChild(nameTD);
tr.appendChild(ETD);
tr.appendChild(PhoneTD);
tr.appendChild(DelTD); //吧tr增加到table上
var tableElement=document.getElementById("tableExample");
tableElement.appendChild(tr);
//删除
aElement.onclick=function(){
//使网页链接失效
return DelTr(aElement);
}
function DelTr(a){
var name= a.parentNode.parentNode.firstChild.firstChild.nodeValue;
//alert(name);
var flag=window.confirm("你真的要删除"+name+"这行么?");
if(!flag){
return false;
}
//获取tr的parent
var TrParent=aElement.parentNode.parentNode.parentNode;
//获取tr
var Tr=aElement.parentNode.parentNode;
//删除
TrParent.removeChild(tr);
//网页链接失效
return false;
}
} } </script>
</head>
<body>
添加用户:<br/>
用户名:<input type="text" name="user"id="userid"/>
Email:<input type="text" name="Ename" id="EID"value="qinxia@so.com"/>
电话:<input type="text" name="Phonename" id="PhoenID"/><br/>
<input type="button"value="提交"id="btn_ID"/>
<table border="1" id="tableExample">
<tr><td>用户名</td><td>Email</td><td>电话</td><td>删除</td></tr> </table> </body>
</html>
document 例子的更多相关文章
- MongoDB (八) MongoDB 文档操作
一. MongoDB 插入文档 insert() 方法 要插入数据到 MongoDB 集合,需要使用 MongoDB 的 insert() 或 save() 方法. 语法 insert() 命令的基 ...
- trigger()的event事件对象之坑
问题引入,先贴一段有问题的代码,如果你对 trigger() 这个函数了解不透彻,还真看不出这段代码错在哪.完成的功能是样式转换器,想让页面在加载后自行触发点击事件隐藏三个按钮,但是效果如图并没有隐 ...
- js鼠标右键操作
一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...
- MongoDB 基础命令——数据库表的增删改查——遍历操作表中的记录
分组排序查询最大记录 //对 "catagory" 不等于 null 的数据进行分组查询,且查询结果倒序 db.getCollection('userAccount').aggre ...
- MongoDB快速入门
http://www.yiibai.com/mongodb/mongodb_quick_guide.html 创建数据库 MongoDB use DATABASE_NAME 用于创建数据库.该命令如果 ...
- [knownledge][latex] LaTex入门
序言 最近需要写一份文档, 时间也不是特别紧. 之前一直用markdown写文档. 始终想学一下LaTex, 毕竟是学术论文界的工具. 在提及LaTex的内容之前. 事必是一定要首先提及高德纳的. 他 ...
- mongodb shell和Node.js driver使用基础
开始: Mongo Shell 安装后,输入mongo进入控制台: //所有帮助 > help //数据库的方法 > db.help() > db.stats() //当前数据库的状 ...
- Linux 数据重定向
名称 描述 代码 表示 stdin 标准输入 0 < 或 << stdout 标准输出 1 > 或 >> stderr 标准错误输出 2 2> 或 2> ...
- gnome3增加自定义程序快捷方式
gnome3增加自定义程序快捷方式 1. 安装alacarte 在命令行输入下列命令安装alacarte程序 yum -y install alacarte 安装完毕后,在命令行输入下 ...
随机推荐
- (转)asp.net实现忘记密码找回的代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- 如何读懂SQL Server的事务日志
简介 本文将介绍SQL Server的事务日志中记录了哪一些信息,如何来读懂这些事务日志中信息.首先介绍一个微软没有公开的函数fn_dblog,在文章的接下来的部分主要用到这个函数来读取事务日志. f ...
- [c#]asp.net开发微信公众平台(4)关注事件、用户记录、回复文本消息
上一篇已经把所有消息封装且都各自有方法处理了,这篇从使用第一步——关注开始, 关注之后进行消息记录,同时回复文本消息给用户,关注方法:DoSub,另外新用户扫描带参数的二维码关注方法:DoCodeN ...
- javascript div元素后追加节点
例子解释: 这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必 ...
- 旧版asp.net 发送邮件代码
说到发送邮件发送,先提一下SMTP(呵呵,高手就跳过这一段吧!). SMTP的全称是“Simple Mail Transfer Protocol”,即简单邮件传输协议.它是一组用于从源地址到目的地址传 ...
- ORACLE主要的系统表和系统视图
ORACLE主要的系统表和系统视图 1.系统表 ORACLE数据库的系统参数都存储在数据库中,可以通过SQLPLUS,以用户SYS进行查询.几个重要的表或者视图如下: v$controlfile:控制 ...
- webstrom的注释
今天我们小组的新同学有一个BUG调不好,然后我就帮他调一下.在调试的过程中非常累,纠其原因还是他注释写的不完善.我们可以看一下,他是这样写注释的(随便拿一个方法举例),如下图: 乍一看,是不是觉得他的 ...
- 使用Android平板编程,执行linux命令
android有一些应用支持开发, AIDE 介绍http://www.wandoujia.com/apps/com.aide.ui https://play.google.com/store/app ...
- PYTHON-进阶-ITERTOOLS模块
PYTHON-进阶-ITERTOOLS模块小结 这货很强大, 必须掌握 文档 链接 pymotw 链接 基本是基于文档的翻译和补充,相当于翻译了 itertools用于高效循环的迭代函数集合 组成 总 ...
- Android面试题(文章内容来自他人博客)
腾讯面试题 1.int a = 1; int result = a+++3<<2; 2.int a = 2; int result = (a++ > 2)?(++a):(a+=3); ...