[网页编程]-20 JavaScript Document操作案例

prtyaa 2023-12-27 16:00:57  49304

分类专栏：资讯

本案例是实现表格的添加和删除以及获取数据的操作

实现所用的技术也是前面文章的Document对象的属性来操作

案例效果演示

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tr{
				width: 210px;
				height: 50px;
			}
			td,th{
				width: 210px;
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			//添加表格结构-新增一行
			function addNode1(){
				//获取表格节点ID
				var tab =document.getElementById("tab");
				
				//创建tr节点对象
				var tr =document.createElement("tr");
				//创建td 对象
				var td1 = document.createElement("td");
				//onblur 失去焦点事件
				td1.innerHTML="<input type ='text' / size='18px' onblur='saveVal(this)' >"
				var td2 = document.createElement("td");
				td2.innerHTML="<input type ='text' size='18px' onblur='saveVal(this)' />"
				var td3 = document.createElement("td");
				td3.innerHTML="<input type ='button' value='添加' onclick='addNode1()'/>"+' | '+
							  "<input type ='button' value='删除' onclick='removeNode(this)' />"
				//添加节点
				tab.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				
				
			}
			//赋值操作
			function saveVal(thi){
				//获取父级节点
				var td =thi.parentNode;
				//将元素赋给父级节点
				td.innerText = thi.value;
			}
			
			//删除节点(两种方式,一种是删除子节点,再删除父节点 ,另一种是直接删除父节点)
			function removeNode(thi){
				//选用第一种
			 var tr =thi.parentNode.parentNode;
			 tr.remove();
			}
			
		</script>
	</head>
	<body>
		
		<table border="1px" id="tab">
			<tr>
				<th>图书名称</th>
				<th>图书价格</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>JavaSE</td>
				<td>18</td>
				<td>
					<input type="button" name="" id="" value="添加" onclick="addNode1()" /> |
					<input type="button" name="" id="" value="删除" onclick='removeNode(this)' />
				</td>
			</tr>
			<tr>
				<td>JavaEE</td>
				<td>20</td>
				<td>
					<input type="button" name="" id="" value="添加" onclick="addNode1()" /> |
					<input type="button" name="" id="" value="删除" onclick='removeNode(this)' />
				</td>
			</tr>
		</table>
		
		
		
		
		
	</body>
</html>

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31529

赞同 0

评论 0 条

[网页编程]-20 JavaScript Document操作案例

相关文章

关注我们