javascript如何遍歷表格中的行和單元格

admin發表於2017-03-09
JavaScript

儘管現在普遍使用div佈局來替代表格，這並不說明table是一無是處的，在製作表格型別的結構的時候還是使用table更為有效。在實際應用中有時候需要便利表格中的行和單元格，下面就通過例項簡單介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>便利表格-螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var mytable=document.getElementById("mytable");
  var rows=mytable.rows;
  for(var i=0;i<rows.length;i++){
     for(var y=0;y<rows[i].cells.length;y++){
       alert(rows[i].cells[y].innerHTML)
     }
  }
}
</script>
</head>
<body>
<table border="1" id="mytable">
<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 mytable=document.getElementById("mytable")，獲取id屬性值mytable的物件。

3.var rows=mytable.rows，獲取表格中的行的集合。

4.for(var i=0;i<rows.length;i++)，遍歷表格的行。

5.for(var y=0;y<rows.cells.length;y++)，遍歷每一個單元格。

6.alert(rows.cells[y].innerHTML)，彈出單元格中的內容。

相關文章