【JavaScript】DOM操作表格

最新推荐文章于 2022-11-05 22:06:23 发布

光仔December

最新推荐文章于 2022-11-05 22:06:23 发布

阅读量1.8k

点赞数

分类专栏： JavaScript JavaScript的基础与DOM编程文章标签： jquery javascript DOM

本文链接：https://blog.csdn.net/acmman/article/details/48010081

版权

JavaScript 同时被 2 个专栏收录

40 篇文章 9 订阅

订阅专栏

JavaScript的基础与DOM编程

27 篇文章 21 订阅

订阅专栏

DOM操作表格

1.利用JavaScript动态增加、删除表格内容

页面如图

注:首先说个小问题，有些如制定按钮点击事件的js代码，放在html文档最后可以，放在最前面(<head>标签内)不可以，原因是html文档是自上往下读取，当读到最上面的js、代码时，并没有读取相应的DOM标签，所以制定的按钮功能没有效果，如果非要放在上面，可以指定到window.onload方法中去:

<head>
<span style="white-space:pre">	</span><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>js测试</title>
	<script language="javascript">
	        //window.onload执行规则:
		//1.必须dom结构绘制完毕(整个html解析结束)之后才执行
		//2.页面的所有关联的文件必须加载完毕
		window.οnlοad=function(){
			//<button id="addUser">提交</button>
			document.getElementById("addUser").οnclick=function(){
				alert("xxxx");
			};
		}
	</script>
</head>

言归正传，咱们来实现刚刚说的动态增删表格功能

实现:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   
	    <center>
			<br><br>
			添加用户:<br><br>
			姓名: <input type="text" name="name" id="name" />  
			email: <input type="text" name="email" id="email" />  
			电话: <input type="text" name="tel" id="tel" /><br><br>
			<button id="addUser">提交</button>
			<br><br>
			<hr>
			<br><br>
			<table id="usertable" border="1" cellpadding="5" cellspacing=0>
				<tbody>
					<tr>
						<th>姓名</th>
						<th>email</th>
						<th>电话</th>
						<th> </th>
					</tr>
					<tr>
						<td>Tom</td>
						<td>tom@tom.com</td>
						<td>5000</td>
						<td><a href="deleteEmp?id=Tom">Delete</a></td>
					</tr>
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=Jerry">Delete</a></td>
					</tr>
				</tbody>
			</table>
		</center>
	</body>
	<script language="javascript">
		//window.onload执行规则:
		//1.必须dom结构绘制完毕(整个html解析结束)之后才执行
		//2.页面的所有关联的文件必须加载完毕
		window.οnlοad=function(){
			//<button id="addUser">提交</button>
			document.getElementById("addUser").οnclick=function(){
				/****************************************************/
				//获取文本框的值
				var name=document.getElementById("name").value;
				var email=document.getElementById("email").value;
				var tel=document.getElementById("tel").value;
				
				/****************************************************/
				//创建四个<td>，并加入文本值
				var nameTd=document.createElement("td");
				var nameText=document.createTextNode(name);
				nameTd.appendChild(nameText);
				var emailTd=document.createElement("td");
				var emailText=document.createTextNode(email);
				emailTd.appendChild(emailText);
				var telTd=document.createElement("td");
				var telText=document.createTextNode(tel);
				telTd.appendChild(telText);
				
				//创建超链接标签
				var aTd=document.createElement("td");
				var aElement=document.createElement("a");
				aElement.setAttribute("href","deleteEmp?id="+name);
				var deleteText=document.createTextNode("Delete");
				aElement.appendChild(deleteText);
				aTd.appendChild(aElement);
				
				/****************************************************/
				//创建<tr>
				var trElement=document.createElement("tr");
				
				//增加<td>到<tr>上
				trElement.appendChild(nameTd);
				trElement.appendChild(emailTd);
				trElement.appendChild(telTd);
				trElement.appendChild(aTd);
				
				/****************************************************/
				//增加<tr>到<table>上
				var tableElement=document.getElementById("usertable");
				//tableElement.appendChild(trElement);
				//由于部分IE浏览器显示不正常，为了兼容性，添加到tbody标签上
				//创建tbody，为了跨浏览器显示
				var tbodyElement=document.createElement("tbody");
				tbodyElement.appendChild(trElement);
				
				//放置tbody到table上
				tableElement.appendChild(tbodyElement);
				
				/****************************************************/
				//删除
				aElement.οnclick=function(){
					//return false使网页的链接失效
					return delTr(aElement);
				}
				
				/****************************************************/
				function delTr(aELement){
					var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
					var flag=window.confirm("您真的要删除["+name+"]吗?");
					//点击"取消"按钮
					if(!flag){
						return false;
					}
					
					/*删除*********************************************/
					//获取tbody
					var tbodyElement=aElement.parentNode.parentNode.parentNode;
					//获取tr
					var trElement=aElement.parentNode.parentNode;
					//删除
					tbodyElement.removeChild(trElement);
					//使网页的链接失效
					return false;
				}
			}
		}
		
	</script>
</html>

最终效果:
点击添加，添加成功！

点击"Delete"链接，删除成功！

转载请注明出处：http://blog.csdn.net/acmman/article/details/48010081