【javascript】动态管理用户

原创 2013年12月04日 18:58:33
<script type="text/javascript">
 window.onload = function(){
	 //添加一条记录
	 document.getElementById("adduser").onclick = function(){
	 //获取文本框的值 
	 var namevalue = document.getElementById("name").value;
	 var emailvalue = document.getElementById("email").value;
	 var telvalue = document.getElementById("tel").value;
	 
	 //定义td
	 var nameTdElement =document.createElement("td");
	 var nameTextElement = document.createTextNode(namevalue);
	 nameTdElement.appendChild(nameTextElement);
	 
	 var emailTdElement =document.createElement("td");
	 var emailTextElement = document.createTextNode(emailvalue);
	 emailTdElement.appendChild(emailTextElement);
	 
	 var telTdElement =document.createElement("td");
	 var telTextElement = document.createTextNode(telvalue);
	 telTdElement.appendChild(telTextElement);
	 
	 var aTdElement = document.createElement("td");
	 var aElement = document.createElement("a");
	 aElement.setAttribute("href","deleteEmp?id="+namevalue);
	 var deleteTextElement = document.createTextNode("Delete");
	 aElement.appendChild(deleteTextElement);
	 aTdElement.appendChild(aElement);
	 	
	 //定义tr,将td添加到tr中
	 var trElement = document.createElement("tr");
	 trElement.appendChild(nameTdElement);
	 trElement.appendChild(emailTdElement);
	 trElement.appendChild(telTdElement);
	 trElement.appendChild(aTdElement);
	 
	 //获取table,tbody,将tr节点添加到tbody中
	 var tableElement = document.getElementById("tableuser");
	 var tbodyElement = document.createElement("tbody"); //跨浏览器选择,table自带tbody
	 
	 tbodyElement.appendChild(trElement);
	 tableElement.appendChild(tbodyElement);
	 /******************************************************/
	 //给aElement增加单击事件
	 aElement.onclick = function(){
		 return deleteTr(aElement);  //使网页的链接失效
	 	}	 
	 }
 }
 
 //删除tr
 function deleteTr(aElement){
	 //获取用户名
	 var  name = aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
	 
	 var flag = window.confirm("您真的要删除"+name+"这个用户么");
	 if(!flag){ return false ;} //不删除,点击取消 flag = false
	 
	 //点击确定 flag = true ,删除行
	 var trElement = aElement.parentNode.parentNode;
	 var tableElement = aElement.parentNode.parentNode.parentNode;
	 tableElement.removeChild(trElement);
	 return false ;
 }
</script>

<style type="text/css">
	
</style>

</head>
<body>
	<center>
		添加用户 <br /><br />
		姓名 <input type="text" name="name" id="name" />  
		e-mail <input type="text" name="email" id="email" />  
		电话 <input type="text" name="tel" id="tel" /><br /><br />
		<button id="adduser">提交</button><br /><br /><br />
		<hr />
		<br /><br />
		<table id="tableuser" border="1" cellspacing="0" cellpadding="5">
			<tbody>
				<tr>
					<th>姓名</th>
					<th>e-mail</th>
					<th>电话</th>
					<th> </th>
				</tr>
				<tr>
					<td>tom</td>
					<td>tom@163.com</td>
					<td>1235454</td>
					<td><a href="deleteEmp?id=tom">Delete</a></td>
				</tr>
				<tr>
					<td>kate</td>
					<td>kate@163.com</td>
					<td>432335454</td>
					<td><a href="deleteEmp?id=kate">Delete</a></td>
				</tr>
			</tbody>
		</table>
	</center>
</body>

相关文章推荐

Vue.js的组件(七)分发 之 作用域槽

首先,需要知道的是,每个组件有每个组件自己的作用域。每个组件都是Vue()的实例,有自己的作用域。 比如现在有个组件这样的:Vue.component('father-component1',{ ...
  • oak160
  • oak160
  • 2017年03月23日 18:32
  • 4853

vue2+element 管理后台 集成解决方案 没有没做的,只要想不到的

线上地址 前言 这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用...
  • zgrkaka
  • zgrkaka
  • 2017年04月25日 17:20
  • 9091

基于javascript的用户管理系统

一些知识点梳理: 1.获取ta1表格中的某行某列的元素 document.getElementById("ta1").rows[hangshu].cells[0].innerHTML=docu...

BOS项目练习(权限/角色/用户管理(CRUD),基于数据库实现动态授权,ehcache缓存权限,shiro标签,菜单权限展示)

内容: 1、权限管理(初始化权限数据、添加、查询) 2、角色管理(添加、查询) 3、用户管理(添加、查询) 4、修改BOSRealm中的授权方法----基于数据库实现 5...

内存区划分;内存分配;堆、栈概念分析;动态内存管理数据结构及程序样例;核心态与用户态

一. 在c中分为这几个存储区 1.栈 - 由编译器自动分配释放 2.堆 - 一般由程序员分配释放,若程序员不释放,程序结束时可能由OS回收 3.全局区(静态区),全局变量和静态变量的存储是放在一...

内存区划分;内存分配;堆、栈概念分析;动态内存管理数据结构及程序样例;核心态与用户态

一. 在c中分为这几个存储区 1.栈 - 由编译器自动分配释放 2.堆 - 一般由程序员分配释放,若程序员不释放,程序结束时可能由OS回收 3.全局区(静态区),全局变量和静态变量的存储是放在一...

springBoot+springSecurity 数据库动态管理用户、角色、权限(二)

序:  本文使用springboot+mybatis+SpringSecurity 实现数据库动态的管理用户、角色、权限管理 本文细分角色和权限,并将用户、角色、权限和资源均采用数据库存储,并...

Linux(内核和用户态的)动态内存管理

http://www.ibm.com/developerworks/cn/linux/l-cn-slub/ 内核对象缓冲区管理 Linux 内核在运行过程中,常常会需要经常使用一些内核...

springBoot+springSecurity 数据库动态管理用户、角色、权限(二)

序: 本文使用springboot+mybatis+SpringSecurity 实现数据库动态的管理用户、角色、权限管理本文细分角色和权限,并将用户、角色、权限和资源均采用数据库存储,并且自定义滤...

框架 day54 BOS项目练习(权限/角色/用户管理(CRUD),基于数据库实现动态授权,ehcache缓存权限,shiro标签,菜单权限展示)

框架 day54 BOS项目练习(权限/角色/用户管理(CRUD),基于数据库实现动态授权,ehcache缓存权限,shiro标签,菜单权限展示)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【javascript】动态管理用户
举报原因:
原因补充:

(最多只允许输入30个字)