js获取table表格指定行列td单元格内容

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

js实现的在实际应用中可能需要获取指定行列的td单元格中的内容,下面就通过代码实例介绍一下如何实现此功能。

代码如下:获取table表格指定行列td单元格内容 

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.table{ 
  width:100%; 
  padding:0px; 
  margin:0px; 
  font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体; 
  border-left:1px solid #ADD8E6; 
  border-collapse:collapse; 
} 
/*表头样式。*/ 
.table th{ 
  font-size:12px; 
  font-weight:600; 
  color:#303030; 
  border-right:1px solid #ADD8E6; 
  border-bottom:1px solid #ADD8E6; 
  border-top:1px solid #ADD8E6; 
  letter-spacing:2px; 
  text-align:left; 
  padding:10px 0px 10px 0px; 
  white-space:nowrap; 
  text-align:center; 
  overflow: hidden; 
} 
.table td { 
  border-right:1px solid #ADD8E6; 
  border-bottom:1px solid #ADD8E6; 
  background:#fff; 
  font-size:12px; 
  padding:3px 3px 3px 6px; 
  color:#303030; 
  word-break:break-all; 
  word-wrap:break-word; 
  white-space:normal; 
} 
</style>
<script type="text/javascript">
window.onload=function(){
  var otable=document.getElementById("box");
  var odiv=document.getElementById("show");
  function done(obj,row,col){
    var rows=obj.rows;
    var otd=rows[row].cells[col];
    return otd.innerHTML;
  }
  odiv.innerHTML=done(otable,1,0)
}
</script>
</head>
<body>
<table id="box" 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>
<div id="show"></div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(2).var otable=document.getElementById("box"),获取id属性值为box元素,这里就是table表格。

(3).var odiv=document.getElementById("show"),获取id属性值为show的元素,这里就是底部的div元素。

(4).function done(obj,row,col){},此函数可以获取表格指定行列的td单元格内容,obj参数是table表格对象,row表示行,col表示列,行和列的索引都是从0开始的。

(5).var rows=obj.rows获取表格的行集合。

(6).var otd=rows[row].cells[col],获取指定行列的单元格。

(7).return otd.innerHTML,获取td单元中的内容。

(8).odiv.innerHTML=done(otable,1,0),显示指定行列单元格的内容。

二.相关阅读:

(1).rows可以参阅js rows属性一章节。

(2).cells可以参阅javascript cells一章节。

(3).innerHTML可以参阅js innerHTML一章节。

回复

我来回复
  • 暂无回复内容