JavaScript 遍歷td單元格

admin發表於2018-11-22
原文網址 : https://www.softwhy.com/article-9628-1.html
JavaScript

本章節介紹一下如何遍歷表格的每一個td單元格，並且獲取其中的內容。

程式碼程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#thetable{
  background-color:green;
  font-size:12px;
}
#thetable th{
  text-align:center;
  background-color:#CCF;
  height:30px;
  line-height:30px;
}
#thetable td{
  width:150px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#FFF;
}
</style>
<script type="text/javascript">
function GetInfoFromTable(tableid) {
  var tableInfo="";
  var tableObj=document.getElementById(tableid);
  for(var index=0;index<tableObj.rows.length;index++){
    for(var j=0;j<tableObj.rows[index].cells.length;j++){
      tableInfo+=tableObj.rows[index].cells[j].innerHTML;
      tableInfo+="  ";
    }
    tableInfo+="<br/>";
  }
  return tableInfo;
}
window.onload=function(){
  var infor=GetInfoFromTable("thetable");
  var odiv=document.getElementById("show");
  odiv.innerHTML=infor;
}
</script> 
</head> 
<body> 
<table cellpadding="0" cellspacing="1" id="thetable">
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
    <th>標題四</th>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
</table>
<div id="show"></div>
</body> 
</html>

上面的程式碼實現了遍歷功能，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function GetInfoFromTable(tableid) {}，實現table單元格遍歷功能，引數是table的id屬性值。

（2）.var tableInfo=""，此變數用來儲存td單元格中的資訊。

（3）.var tableObj=document.getElementById(tableid)，獲取table表格元素物件。

（4）.for(var index=0;index<tableObj.rows.length;index++)，遍歷table的每一行，rows獲取tr集合。

（5）.for(var j=0;j<tableObj.rows[index].cells.length;j++)，遍歷當前行每一個單元格，cells獲取td集合。

（6）.tableInfo+=tableObj.rows[index].cells[j].innerHTML，將單元格的內容追加到tableInfo。

（7）.tableInfo+="  "，使用空格分割。

（8）.tableInfo+="<br/>"，每一行的td單元格內容單獨佔據一行。

二.相關閱讀:

（1）.rows參閱表格table rows一章節。

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

（3）.innerHTML參閱JavaScript innerHTML一章節。

相關文章