快捷導(dǎo)航

JavaScript獲取table中某一列的值的方法

更新時(shí)間：2014年05月06日 09:59:26 作者：

這篇文章主要介紹了JavaScript獲取table中某一列的值的方法,需要的朋友可以參考下

1、實(shí)現(xiàn)源碼

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript實(shí)現(xiàn)獲取table中某一列的值</title> 
<script type="text/javascript"> 
function getTdValue() 
{ 
var tableId = document.getElementById("tab"); 
var str = ""; 
for(var i=1;i<tableId.rows.length;i++) 
{ 
alert(tableId.rows[i].cells[1].innerHTML); 
} 
} 
</script> 
</head> 

<body style="width:100%; height:100%;"> 
<table style="width:100%; height:100%;" id="tab" onclick="getTdValue()" border="1" cellpadding="1" cellspacing="1"> 
<tr style="background-color:#CCC;"> 
<th>學(xué)號(hào)</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> 

2、設(shè)計(jì)結(jié)果

（1）初始化時(shí)

（2）單擊第二列時(shí)

您可能感興趣的文章:

相關(guān)文章

發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載
發(fā)布BlueShow v1.0 圖片瀏覽器(類似lightbox)blueshow.js 打包下載...
2007-07-07
當(dāng)json鍵為數(shù)字時(shí)的取值方法解析
對(duì)于數(shù)字鍵名或者非正常變量字符（比如有空格），必須使用 aa[x]的方式
2013-11-11
Nuxt配置Element-UI按需引入的操作方法
這篇文章主要介紹了Nuxt配置Element-UI按需引入方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-07-07
用js格式化金額可設(shè)置保留的小數(shù)位數(shù)
這篇文章主要介紹了如何用js格式化金額并設(shè)置保留的小數(shù)位數(shù),需要的朋友可以參考下
2014-05-05
JS中的函數(shù)與對(duì)象的創(chuàng)建方式
這篇文章主要介紹了JS中的函數(shù)與對(duì)象的創(chuàng)建方式，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
javascript 定義新對(duì)象方法
定義新對(duì)象方法
2010-02-02
JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化（二）
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跑馬燈抽獎(jiǎng)活動(dòng)實(shí)例代碼解析與優(yōu)化（二）的相關(guān)資料,需要的朋友可以參考下
2016-02-02
JavaScript鼠標(biāo)禁止右鍵禁止打開控制臺(tái)及鍵盤禁用
這篇文章主要給大家介紹了關(guān)于JavaScript鼠標(biāo)禁止右鍵禁止打開控制臺(tái)及鍵盤禁用的相關(guān)資料,實(shí)現(xiàn)禁止右鍵和禁止打開控制臺(tái)是一種常見的網(wǎng)頁保護(hù)技巧,可以防止非法復(fù)制、盜取網(wǎng)頁資源等安全問題,需要的朋友可以參考下
2023-10-10
Bootstrap媒體對(duì)象的實(shí)現(xiàn)
在web頁面中，圖片居左，內(nèi)容居右排列，是非常常見的效果，它也就是媒體對(duì)象，它是一種抽象的樣式，可以用來構(gòu)建不同類型的組件。本文給大家介紹Bootstrap媒體對(duì)象的實(shí)現(xiàn)，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05
JS圖片預(yù)加載 JS實(shí)現(xiàn)圖片預(yù)加載應(yīng)用
由于圖片加載慢，導(dǎo)致用戶體驗(yàn)特別差，本文將介紹一種圖片預(yù)加載技術(shù)，需要了解的朋友可以參考下
2012-12-12