javascript如何遍歷表格

螞蟻小編發表於2017-02-27
原文網址 : https://www.softwhy.com/article-1997-1.html
JavaScript

有時候需要去遍歷一個表格中的資料，然後把這個資料存入一個陣列。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset=" utf-8"> 
<title>javascript便利表格</title>
<script type="text/javascript">
function getData(){
  var arrData=new Array();
  var objTable=document.getElementById("myTable");
  var x=0
  if(objTable){
    for(var i=0;i<objTable.rows.length;i++){
      for(var j=0;j<objTable.rows[i].cells.length;j++){
        arrData[x] = objTable.rows[i].cells[j].innerText;
        x=x+1;
      }
    }
  }
  alert(arrData.length);
}
</script>
</head>
<body>
<table border="1" id="myTable">
  <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>
<form>
<input type="button" value="getData" onclick="getData()" />
</form>
</body>
</html>

以上程式碼實現了我們的需求，可以將表格中的內容存入陣列，最後彈出陣列的長度。

程式碼註釋:

1.var arrData=new Array()，建立一個陣列用於儲存表格單元格中的內容。

2.var objTable=document.getElementById("myTable")，獲取表格物件。

3.var x=0，定義個變數x，作為陣列表格單元的索引。

4.for(var i=0;i<objTable.rows.length;i++)，遍歷比偶個的行，objTable.rows可以獲得表格行的集合。

5.for(var j=0;j<objTable.rows.cells.length;j++)，遍歷表格每一行的單元格。

6.arrData[x]=objTable.rows.cells[j].innerTex，將表格單元格中的內容存在輸入。

7.x=x+1，索引值加1.

相關文章