js 操作元素节点对象添加表格

最新推荐文章于 2024-09-02 16:57:22 发布

原创最新推荐文章于 2024-09-02 16:57:22 发布 · 841 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用JavaScript动态创建和操作HTML表格元素，包括添加行、列、单元格等，帮助开发者更好地实现网页交互功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addNode(){
				//1.添加节点    tr和td 利用innerHtml识别html语法 添加文本框 全部添加到表格中
				//2.处理点击事件  文本框中输入结束失去焦点时触发onblur事件 让文本框内容提交到td中innerText(双标签中只获得文本内容)
				//3.删除事件  del(this) this表示自身元素 获得父级的父级元素并删除 remove()     
				var tab=document.getElementById("tab")
				var tr=document.createElement("tr");
				var td1=document.createElement("td");
				td1.innerHTML="<input type='text' size='5px' onblur='leave(this)' />"
				var td2=document.createElement("td");
				td2.innerHTML="<input type='text' size='5px' onblur='leave(this)' />"
				var td3=document.createElement("td");
				td3.innerHTML="<input type='button' value='添加' onclick='addNode()'/>"+
				               "<input type='button' value='删除' onclick='del(this)'/>"
				tab.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				
			}
			function del(self){
				 var  tab=self.parentNode.parentNode;
				 tab.remove()
			}
			function leave(self){
				var td=self.parentNode
				td.innerText=self.value
				
				
			}
		</script>
		<style type="text/css">
			td,tr{width: 100px; height: 70px; text-align: center;}
		</style>
	</head>
	<body>
	
		<table border="1px" bordercolor="red" align="center" cellspacing=0 id="tab">
			<tr height="70px">
				<th width="100px">图书名称</th>
				<th width="100px">图书价格</th>
				<th width="130px">操作</th>
			</tr>
			<tr height="70px" align="center">
				<td>java</td>
				<td>$122</td>
				<td ><input type="button" name="" id="" value="添加" onclick="addNode()"/>
					<input type="button" value="删除" /></td>
			</tr>
			<tr height="70px" align="center">
				<td>python</td>
				<td>$100</td>
				<td ><input type="button" name="" id="" value="添加" />
					<input type="button" value="删除" /></tr></td>
			</tr>
		</table>
	</body>
</html>