这个tbody值是什么？-慕课网

首页课程实战体系课手记专栏慕课教程

这个tbody值是什么？

来源：9-22 编程练习

果冻上树

2016-04-06 15:53

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

写回答关注

3回答

传说中的小白龙: 2016-04-13 23:48:15

已采纳

经过测试我发现在table标签后其实不是html文档中所写的tr标签，而是TBODY标签。这是测试代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>

</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:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
  </tr>

  <tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
  </tr>  

  </table>
  <input type="button" value="添加一行"  />   <!--在添加按钮上添加点击事件  -->
  <script type="text/javascript">
  var a = document.getElementById('table');
  var b = a.childNodes;
  for (var i = 0; i < b.length; i++) {
   document.write("<br/>"+b[i].nodeName);
  }
  
  </script>
</body>
</html>

所得结果为

#text
TBODY

很明显的可以看到，table只有两个子节点，第一个#text是table标签后的空白节点，而TBODY则是空白节点后的节点。相当于浏览器自动加载了一个TBODY节点，将原先table标签的子节点全部保存进了TBODY。

1 2

果冻上树

非常感谢！

2016-04-14 09:18:44

共 1 条回复 >

果冻上树

2016-04-06 16:04:18

<!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(){
Highlight();
}
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);
Highlight();
}

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

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";
}
}
}

</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>
请问指的是哪些？

0 0
暮歌晨

2016-04-06 16:02:17

id 为 table 的节点的最后一个子节点

0 0

JavaScript进阶篇

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

469330 学习 · 22585 问题

查看课程

相似问题

懂了这里隐藏了tbody这个标签，damn！！！

回答 1

var tbody = document.getElementById('table').lastChild; 这个到底是指哪个

回答 3

tbody获得的节点是哪个？

回答 1

tr的爹是tbody，tbody的爹是table？那么我再table下加一个tr，怎么是tabel.appendChild(tr),不是tbody.appendChild(tr)?

回答 1

document.write(tbody.nodeName);结果为TBODY呢，我HTML中没有这个节点啊？tbody = document.getElementById('myTable').lastChild; 为什么这里要加上lastChild呢？

回答 2

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