会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132360个问题
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 436楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 438楼
JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 439楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 441楼

2021 01 27

<!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(){
				
				//获得table表格对象
				var  tab=document.getElementById("tab"); 
				
				//创建tr节点对象
				
				var tr =document.createElement("tr");
				
				//创建td对象
				
				var  td =document.createElement("td");
				//											 失去焦点
				td.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>"
				
				var  td2 =document.createElement("td");
				
				td2.innerHTML="<input type='text' size='10px'  onblur='seaveVal(this)'/>"
				
				var  td3 =document.createElement("td");
				
				td3.innerHTML="<input type='button'  value='添加'/> "+
				              "<input type='button' value='删除' onclick='removeNode(this)'/>"
				
				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){
				
				//获得tr节点
				
				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>javaSE</td>
				<td>19</td>
				<td>
					
					<input type="button" name="" id="" value="添加"  onclick="addNode()"/>
					
					<input type="button" name="" id="" value="删除" onclick='removeNode(this)' />
					
				</td>
			</tr>
			<tr>
				<td>javaEE</td>
				<td>39</td>
				<td>
					
					<input type="button" name="" id="" value="添加" onclick="addNode()"/>
					
					<input type="button" name="" id="" value="删除" onclick='removeNode(this)'/>
					
				</td>
			</tr>
		</table>
		
		
	</body>
</html>

老师,

function  seaveVal(thi){
				
				
				//获得父亲级节点
				
				var  td =thi.parentNode;
				
				td.innerText=thi.value;
			
			}

的thi参数是自己定义(任意写)用来接收数据的吗?

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 444楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 445楼

老师,您好,我想要请教以下为啥,我按删除按钮,他不会将整行数据删除

点击前:

image.png

点击后:

image.png

我的代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM案例实现</title>
		<style>
			tr{
				height: 70px;
			}
			td,th{
				width: 200px;	
				/*内容居中*/		
				text-align: center;			
			}
		</style>
		<script>
			//添加操作
			function add(){
				//获得table表格对象
				var table = document.getElementById("table1");
				//创建tr结点对象(行),并放到table里面
				var tr = document.createElement("tr");
				table.appendChild(tr);				
				//创建td结点对象(列),并放到tr里面
				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				var td3 = document.createElement("td");	
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3); 				
				//td内的内容
				td1.innerHTML = "<input type='text' size='10px' onblur='save(this)'/>";
				td2.innerHTML = "<input type='text' size='10px' onblur='save(this)'/>";
				td3.innerHTML = "<input type='button' value='添加' />"+
								"<input type='button' value='删除' onclick='removeNode(this)' />";	
			}
			//保存操作
			function save(thi){
				//间接获得父节点
				var td = thi.parentNode;
				//将值交给外层的父节点
				td.innerText = thi.value;
			}
			//删除操作
			function removeNode(thi){
				var tr= thi.parentNode.parentNode;
				tr.remove();
			}

		</script>
	</head>
	<body>
		<table id="table1" border="1px" align="center">
			<tr>
				<th>图书名称</th>
				<th>图书价格</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>javaSE</td>
				<td>19</td>
				<td>
					<input type="button" name="" id="" value="添加" onclick="add()" />
					<input type="button" name="" id="" value="删除" onclick="removeNode(this)"/>
				</td>
			</tr>
			<tr>
				<td>javaEE</td>
				<td>22</td>			
				<td>
					<input type="button" name="" id="" value="添加" onclick="add()" />
					<input type="button" name="" id="" value="删除" onclick="removeNode(this)"/>				
				</td>
			</tr>
		</table>
	</body>
</html>


JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 446楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 449楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637