获取DOM节点的问题-慕课网

获取DOM节点的问题

来源：9-22 编程练习

无兄弟不编程

2015-03-11 09:42

var tbody = document.getElementById('table').lastChild;	
var trs = tbody.getElementsByTagName('tr');

如上 target获取的是table下的最后一个子节点也就是最后一个<tr></tr>标签

那么为什么trs要在最后一个tr标签下获取tr标签呢？

源代码如下

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  
		window.onload = function(){
		var tbody = document.getElementById('table').lastChild;	
		var	trs = tbody.getElementsByTagName('tr');   
		for(var i =1;i<trs.length;i++){
			trs[i].onmouseover = function(){
				this.style.backgroundColor ="#f2f2f2";
			} 
			trs[i].onmouseout = function(){
				this.style.backgroundColor ="#fff";
			} 
		}  
	 }  
	 function addOne(obj){ 
	    var tbody = document.getElementById('table').lastChild;  
		var tr = document.createElement('tr');  
		 
		 var td = document.createElement("td");
		 td.innerHTML = "<input type='text'/>";
		 tr.appendChild(td);
		 
		 td = document.createElement("td");	 
		 td.innerHTML = "<input type='text'/>";
		 tr.appendChild(td);
		 
		 td = document.createElement("td");	
		 td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>";
		 tr.appendChild(td);   
		 
		 tbody.appendChild(tr);   
			
   	 }

	 function deleteRow(obj){
	    var tbody = document.getElementById('table').lastChild;  
		var tr = obj.parentNode.parentNode;
		 tbody.removeChild(tr);
	 }


  </script> 
 </head> 
 <body> 
	   <table border="1" width="50%" id="table">
	   <tr>
		<th>学号</th>
		<th>姓名</th>
		<th>操作</th>
	   </tr>  

	   <tr>
		<td>xh001</td>
		<td>王小</td>
		<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
	   </tr>

	   <tr>
		<td>xh002</td>
		<td>刘小</td>
		<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
	   </tr>  

	   </table>
	   <input type="button" value="添加 onclick="addOne()" />
 </body>
</html>

写回答关注

1回答

康振宁

2015-03-11 10:47:00

已采纳

table的子节点结构是text和tbody
var tbody = document.getElementById('table').lastChild; 这句话是获取tbody，所有tr和td都在tbody中

2 0

livelo... 回复Ambiti...

table有两个子节点，一个是标签<table>回车</table>中回车产生的空格text，一个是表格体tbody。表格的节点在thead(表头)与tfoot（页脚）tbody（表格体）中。个人理解，有问题请指正。谢谢各位~

2016-03-14 11:27:45

共 2 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

469065 学习 · 22582 问题

查看课程

相似问题

获取属性节点问题

回答 2

关于dom节点问题

回答 1

关于获取节点属性的问题

回答 3

获取子节点

回答 2

获取节点的方式？？？

回答 1

打开慕课网App查看更多内容