jquery實現的獲取指定行列td單元格內容

admin發表於2017-04-01
jQuery

本章節通過程式碼例項介紹一下如何利用jquery實現獲取指定行列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 src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  function done(obj,row,col){
    return obj.find("tr").eq(row).find("td").eq(col);
  }
  $("#show").text((done($("#box"),1,0).text()));
});
</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）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.function done(obj,row,col){  

  return obj.find("tr").eq(row).find("td").eq(col);

}，可以獲取指定的行列td元素jquery物件，第一個引數是jquery表格物件，第二個是行數，第三個是列數，都是從0開始。（3）.$("#show").text((done($("#box"),1,0).text()))，將td中的內容寫入div。

二.相關閱讀:

（1）.find()可以參閱jQuery find()一章節。

（2）.eq()可以參閱jQuery eq()一章節。

（3）.text()可以參閱jQuery text()一章節。

相關文章