JavaScript獲取table表格指定列的值

admin發表於2018-07-11
原文網址 : https://www.softwhy.com/article-4345-1.html
JavaScript

本章節介紹一下如何利用JavaScript獲取表格指定列的值。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#tab{
  width:500px;
  margin:50px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  function getTdValue(){ 
    var tableId=document.getElementById("tab"); 
    var str=""; 
    for(var i=1;i<tableId.rows.length;i++){ 
      theArray.push(tableId.rows[i].cells[1].innerHTML); 
    } 
  } 
  var oshow=document.getElementById("show");
  var theArray=[];
  getTdValue();
  oshow.innerHTML=theArray.toString();
}
</script>
</head>
<body>
<div id="show"></div>
<table  id="tab" border="1">
  <tr style="background-color:#CCC;">
    <th>學號</th>
    <th>姓名</th>
    <th>性別</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>1</td>
    <td>李斯</td>
    <td>男</td>
    <td>22</td>
  </tr>
  <tr>
    <td>2</td>
    <td>王倩</td>
    <td>女</td>
    <td>20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>于謙</td>
    <td>男</td>
    <td>18</td>
  </tr>
  <tr>
    <td>4</td>
    <td>柳浪</td>
    <td>女</td>
    <td>19</td>
  </tr>
  <tr>
    <td>5</td>
    <td>諸葛亮</td>
    <td>男</td>
    <td>20</td>
  </tr>
  <tr>
    <td>6</td>
    <td>東方雲</td>
    <td>女</td>
    <td>21</td>
  </tr>
  <tr>
    <td>7</td>
    <td>公孫策</td>
    <td>男</td>
    <td>22</td>
  </tr>
  <tr>
    <td>8</td>
    <td>寶清</td>
    <td>女</td>
    <td>23</td>
  </tr>
  <tr>
    <td>9</td>
    <td>智育</td>
    <td>男</td>
    <td>20</td>
  </tr>
  <tr>
    <td>10</td>
    <td>柳絲絲</td>
    <td>女</td>
    <td>21</td>
  </tr>
</table>
</body>
</html>

以上程式碼實現了我們的要求，程式碼比較簡單，下面簡單介紹一下它的實現過程。

一.實現原理:

實現原理非常簡單，列是由單元格組成的，程式碼思路就是迴圈遍歷表格的行，然後使用rows.cells獲取當前行單元格集合，再使用索引值獲取指定位置的單元格，於是就可以獲取一個表格的指定列的所有單元格。

二.相關閱讀:

（1）.rows屬性參閱表格table rows集合一章節。 

（2）.push()函式參閱javascript push()一章節。

（3）.cells屬性參閱javascript table cells一章節。 

（4）.innerHTML屬性參閱js innerHTML一章節。

相關文章