js迭代table表格的行和列代码实例

http://www.softwhy.com/forum.php?mod=viewthread&tid=15098

js迭代table表格的行和列代码实例:

表格是最为常用的元素之一，虽然已经没有以前那么火热，但并不表示它就没有市场了，现在对于它的应用的定位也越来越恰当和准确，也就是说它现在基本已经不会被用在布局上，而是用在对数据的组织上，回归正题，下面就介绍一下如何迭代table表格的行列。
代码实例:
实例一:

[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 ;
}

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]  纯文本查看  复制代码 运行代码

< 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 ;
}

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]  纯文本查看  复制代码 运行代码

< 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
      arr.push(otable.rows[index].cells[j].innerHTML);
    }
  }
  odiv.innerHTML = arr .toString();
}

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表格的每一个单元格，并将其中的内容存入数组。