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

2023-12-04 13:46:34 前端笔记 192

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

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

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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一章节。