JavaScript获取table表格指定列的值
分类：实例代码
JavaScript获取table表格指定列的值属于前端实例代码，有关更多实例代码大家可以查看。
本章节介绍一下如何利用JavaScript获取表格指定列的值。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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一章节。
JavaScript获取table表格指定列的值，这样的场景在实际项目中还是用的比较多的，关于JavaScript获取table表格指定列的值就介绍到这了。