JavaScript 獲取表格指定td單元格

antzone發表於2019-05-01
JavaScript

本章節介紹一下如何獲取一個表格中指定的單元格，然後對齊進行一定的操作。

下面就是一段能夠實現此功能的程式碼例項，需要的朋友可以做一下參考。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
table{
  background:green;
}
table td{
  background:white;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var otable=document.getElementsByTagName("table")[0];
  var otody=otable.children;
  var otrs=otody[0].children;
  var otds=otrs[2].children;
  otds[1].innerHTML="分享互助";
}
</script> 
</head> 
<body> 
<table>
<tr>
  <td>螞蟻部落一</td>
  <td>螞蟻部落二</td>
  <td>螞蟻部落三</td>
</tr>
<tr>
  <td>螞蟻部落四</td>
  <td>螞蟻部落五</td>
  <td>螞蟻部落六</td>
</tr>
<tr>
  <td>螞蟻部落七</td>
  <td>螞蟻部落八</td>
  <td>螞蟻部落九</td>
</tr>
</table>
</body> 
</html>

可以將第三個的第二個單元的文字內容修改，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.window.onload=function(){}，當文件完全載入完畢再去執行函式中的程式碼。

（2）.var otable=document.getElementsByTagName("table")[0]，獲取table物件。

（3）.var otody=otable.children，獲取otable物件的一級子元素集合，其實就是獲取的tbody，可能很多朋友疑惑，在表格中並沒有tbody，不過會預設新增一個tbody元素的。

（4）.var otrs=otody[0].children，獲取tbody下的一級子元素集合，也就是tr元素集合。

（5）.var otds=otrs[2].children，獲取第三行下所有的td元素。

（6）.otds[1].innerHTML="分享互助"，設定第二個單元格中的文字。

二.相關閱讀：

（1）.document.getElementsByTagName()參閱document.getElementsByTagName()一章節。 

（2）.children參閱JavaScript children一章節。 

相關文章