js迭代table表格的行和列程式碼例項

admin發表於2017-12-04
JS

表格是最為常用的元素之一，雖然已經沒有以前那麼火熱，但並不表示它就沒有市場了，現在對於它的應用的定位也越來越恰當和準確，也就是說它現在基本已經不會被用在佈局上，而是用在對資料的組織上，迴歸正題，下面就介紹一下如何迭代table表格的行列。

程式碼例項:

例項一:

[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"> 
window.onload=function(){
  var otable=document.getElementById("antzone");
  var odiv=document.getElementById("show");
  var num=0;
  for(var index=0;index<otable.rows.length;index++){
    num=num+1;
  }
  odiv.innerHTML=num;
}
</script>
</head>
<body>
<div id="show"></div>
<table id="antzone" 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>
</body>
</html>

上面的程式碼可以獲取表格中行的數目，使用rows屬性即可實現此功能。

例項二:

[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"> 
window.onload=function(){
  var otable=document.getElementById("antzone");
  var odiv=document.getElementById("show");
  var num=0;
  for(var index=0;index<otable.rows[0].cells.length;index++){
    num=num+1;
  }
  odiv.innerHTML=num;
}
</script>
</head>
<body>
<div id="show"></div>
<table id="antzone" 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>
</body>
</html>

上面的程式碼可以獲取表格中列的資料，原理也很簡單，一行中單元格的數目就是列的數目。

例項三:

[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"> 
window.onload=function(){
  var otable=document.getElementById("antzone");
  var odiv=document.getElementById("show");
  var arr=[];
  for(var index=0;index<otable.rows.length;index++){
    for(var j=0;j<otable.rows[index].cells.length;j++){
      arr.push(otable.rows[index].cells[j].innerHTML);
    }
  }
  odiv.innerHTML=arr.toString();
}
</script>
</head>
<body>
<div id="show"></div>
<table id="antzone" 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>
</body>
</html>

上面的程式碼可以遍歷table表格的每一個單元格，並將其中的內容存入陣列。

相關文章