js遍歷迭代table表格的每一個td單元格程式碼例項

螞蟻小編發表於2017-03-27
JS

本章節介紹一下如何利用原生javascript遍歷table表格中的每一個td單元格，下面就通過程式碼例項詳細介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.table{
  width:300px;
  height:100px;
  border:1px solid #ccc;
  border-collapse:collapse;
}
.table td,.table th {
  border:1px solid #ccc;
  padding:5px;
}
</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 += "\n";
  }
  return tableInfo;
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    alert(GetInfoFromTable("tb"));
  }
}
</script>
</head>
<body>
<table id="tb" class="table">
  <thead>
    <tr>
      <th>螞蟻部落一</th>
      <th>螞蟻部落二</th>
    </tr>
  </thead>
  <tr>
    <td>javascript教程</td>
    <td>jQuery教程</td>
  </tr>
  <tr>
    <td>HTML教程</td>
    <td>div css教程</td>
  </tr>
</table>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了我們的要求，可以便利表格中的每一個單元格，下面介紹一下它的實現過程。

一.程式碼註釋:1.function GetInfoFromTable(tableid){}，此函式實現了對td單元格的遍歷效果，函式的引數是table表格的id屬性值。

2.var tableInfo = ""，宣告一個變數，初始值設定為空字串，它用來儲存單元格中的內容。

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

4.for (var index = 0; index < tableObj.rows.length; index++)，遍歷表格中的每一個行。

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

6.tableInfo += tableObj.rows[index].cells[j].innerHTML，將單元格中的內容住家到字串中。

7.tableInfo += "  "，追加完畢後面加個空格用來分隔每一個單元格中的內容。

8.tableInfo += "\n"，每一行單元格內容追加完畢新增一個換行符。

9.return tableInfo，返回連線後的字串。

二.相關閱讀:

1.for迴圈語句可以參閱js for迴圈語句用法簡單介紹一章節。

2.innerHTML屬性可以參閱js innerHTML一章節。

3.cells屬性可以參閱javascript table cells一章節。

相關文章