js獲取table表格指定行列td單元格內容

antzone發表於2017-04-03
JS

js實現的在實際應用中可能需要獲取指定行列的td單元格中的內容，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:獲取table表格指定行列td單元格內容 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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一章節。

相關文章