js动态表格，留着复习动态添加元素_动态表格绑定元素-优快云博客

本文链接：https://blog.youkuaiyun.com/javadhh/article/details/35235231
</pre><pre name="code" class="javascript"><!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>动态生成表格的创建</title>
<!--如果直接js放在这里，直接给按钮添加点击事件，就可能不会执行，因为在按照顺序，下面的button还没有创建
	所以添加之后没有用，解决方法可以将js放在后面，也可以写在window.onload里面， 它会在dom节点完成之后再执行-->
	<script type="text/javascript">
		window.οnlοad=function(){
			//得到按钮元素节点，添加一个点击事件
			var buttonElement = document.getElementById("add");
			buttonElement.οnclick=function(){
				/** 目标格式：
				 * <tr align=center height=35px>
					<td>张三</td>
					<td>18</td>
					<td>打篮球</td>
					<td><a href="delete?id=">删除</a></td>
				   </tr>
				 */
				//得到要添加的值
				var nameValue = document.getElementById("name").value;
				var ageValue = document.getElementById("age").value;
				var hobbyValue = document.getElementById("hobby").value;
				//创建tr
				var trElement = document.createElement("tr");
				  //为tr添加属性
				trElement.setAttribute("align","center");
				trElement.setAttribute("height","35px");
				//创建td
				var tdNameElement = document.createElement("td");
				var tdAgeElement = document.createElement("td");
				var tdHobbyElement = document.createElement("td");
				var tdAElement = document.createElement("td");
				//创建文本节点
				var nameElement = document.createTextNode(nameValue);
				var ageElement = document.createTextNode(ageValue);
				var hobbyElement = document.createTextNode(hobbyValue);
				//为td添加文本节点
				tdNameElement.appendChild(nameElement);
				tdAgeElement.appendChild(ageElement);
				tdHobbyElement.appendChild(hobbyElement);
				  //添加a链接
				var aElement = document.createElement("a");
				aElement.setAttribute("href","delete?id="+nameValue);
				aElement.innerHTML="删除";
				    //给a链接添加点击事件，实现删除功能
				aElement.οnclick=function(){
					var flag = window.confirm("您真的要删除【 "+nameValue+" 】这条数据吗？？");
					if(!flag){    //点击取消
						return false;   //使链接失效
					}
					/**--------删除功能-----------**/
					//得到a这条数据的tr
					var deleteTr = this.parentNode.parentNode;
					//得到tbody
					var deleteTbody = this.parentNode.parentNode.parentNode;
					deleteTbody.removeChild(deleteTr);
					return false;    //使a链接的href失效
				}
				tdAElement.appendChild(aElement);
				//为tr添加td元素节点
				trElement.appendChild(tdNameElement);
				trElement.appendChild(tdAgeElement);
				trElement.appendChild(tdHobbyElement);
				trElement.appendChild(tdAElement);
				//为了兼容IE浏览器，添加tbody节点,并将tr添加到tbody
				var tbodyElement = document.createElement("tbody");
				tbodyElement.appendChild(trElement);
				//得到table元素,将tbody添加到table
				var tableElement = document.getElementById("usersInfo");
				tableElement.appendChild(tbodyElement);
			}
			
			//给重置按钮添加点击事件
			document.getElementById("clear").οnclick=function(){
				clear();
			}
		}
		
		/**
		 * 重置函数，清空输入框中的数据
		 */
		function clear(){
			document.getElementById("name").value="";
			document.getElementById("age").value="";
			hobbyValue = document.getElementById("hobby").value=""
		}
	</script>
</head>
<body>
	<br/><br/>
	<center>
		姓名：<input type="text" id="name" name="name"/> 
		年龄：<input type="text" id="age" name="age"/>
		爱好：<input type="text" id="hobby" name="hobby" />
		<br/><br/>
		<input type="button" name="add" id="add" value="添加记录"/>
		<input type="button" name="clear" id="clear" value="重置"/>
		<br/><br/>
		<table id="usersInfo" width=600px border=1px bordercolor=blue>
			<!--为了兼容IE浏览器，添加一个tbody-->
			<tbody>
				<tr align=center height=40px>
					<td style="font-color:red;">姓名</td>
					<td>年龄</td>
					<td>爱好</td>
					<td>操作</td>
				</tr>
			</tbody>
		</table>
	</center>
</body>
</html>
效果图：