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

快乐打工仔 分类:实例代码

js迭代table表格的行和列代码实例属于前端实例代码,有关更多实例代码大家可以查看

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

代码实例:

实例一:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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属性即可实现此功能。

实例二:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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>

上面的代码可以获取表格中列的数据,原理也很简单,一行中单元格的数目就是列的数目。

实例三:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" /> 
<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表格的每一个单元格,并将其中的内容存入数组。

js迭代table表格的行和列代码实例,这样的场景在实际项目中还是用的比较多的,关于js迭代table表格的行和列代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容