JavaScript获取table表格指定列的值

2018-7-11 15:45| 作者: admin| 查看: 254| 评论: 0|来自: 蚂蚁部落

本章节介绍一下如何利用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一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部