Html+css+js实操(一)表单添加与删除

网页设计实操(一)表单添加与删除

DOM案例实现:(一个表单的添加与删除)

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			
			tr{
				height: 70px;
			}
			
			td ,th{
				
				width: 150px;
				
				text-align: center;
			}
		style>
		<script>
			
			function addNode(){
				
				//获得tab表格对象
				
				var tab = document.getElementById("tab");
				
				//创建tr节点对象
				
				var tr =document.createElement("tr");
				
				//创建td对象
				
				var td =document.createElement("td");
				
				td.innerHTML="";
				
				var td2 =document.createElement("td");
				
				td2.innerHTML="";
				
				var td3 =document.createElement("td");
				
				td3.innerHTML=""+
								"";
				
				tab.appendChild(tr);
				tr.appendChild(td);
				tr.appendChild(td2);
				tr.appendChild(td3);
			}
			
			function seaveVal(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" align="center" id ="tab">
			<tr>
				<th>图书名称th>
				<th>图书价格th>
				<th>操作th>
			tr>
			<tr>
				<td>pythontd>
				<td>99td>
				<td>
					
					<input type="button" name="" id="" value="添加"  onclick="addNode()"/>
					
					<input type="button" name="" id="" value="删除" onclick="removeNode(this)">
				td>
			tr>
			<tr>
				<td>python3.0td>
				<td>97td>
				<td>
					
					<input type="button" name="" id="" value="添加" onclick="addNode()" />
					
					<input type="button" name="" id="" value="删除"  onclick="removeNode(this)"/>
				td>
			tr>

		table>
		
		
		
	body>
html>

你可能感兴趣的:(网页设计加实操,html)