本章节介绍一下如何利用原生javascript遍历table表格中的每一个td单元格,下面就通过代码实例详细介绍一下如何实现此功能。

代码实例如下:
   [ bootstrap ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</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"> 
function GetInfoFromTable(tableid){
  var tableInfo = "";
  var tableObj = document.getElementById(tableid);
  for (var index = 0; index < tableObj.rows.length; index++) {
    for (var j = 0; j < tableObj.rows[index].cells.length; j++) {
      tableInfo += tableObj.rows[index].cells[j].innerHTML;
      tableInfo += "  ";
    }
    tableInfo += "\\n";
  }
  return tableInfo;
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    alert(GetInfoFromTable("tb"));
  }
}
</script>
</head>
<body>
<table id="tb" class="table">
  <thead>
    <tr>
      <th>51前端一</th>
      <th>51前端二</th>
    </tr>
  </thead>
  <tr>
    <td>javascript教程</td>
    <td>jQuery教程</td>
  </tr>
  <tr>
    <td>HTML教程</td>
    <td>div css教程</td>
  </tr>
</table>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

代码描述:js遍历迭代table表格 单元格。js遍历迭代table表格单元格代码实例



132 176



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到