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


Posted in Javascript onMay 06, 2014

1、实现源码

<!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实现获取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>学号</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、设计结果

(1)初始化时
JavaScript获取table中某一列的值的方法 
(2)单击第二列时
JavaScript获取table中某一列的值的方法

Javascript 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js字符串转成JSON
Nov 07 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
jQuery判断元素是否存在的可靠方法
May 06 #Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 #Javascript
简单的js图片轮换代码(js图片轮播)
May 06 #Javascript
jQuery is()函数用法3例
May 06 #Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 #Javascript
一些老手都不一定知道的JavaScript技巧
May 06 #Javascript
jQuery中的$.ajax()方法应用
May 06 #Javascript
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
医院护士求职自荐信格式
2013/09/21 职场文书
优秀团员个人的自我评价
2013/10/02 职场文书
护士自我鉴定
2013/10/23 职场文书
参观考察邀请函范文
2014/01/29 职场文书
超市重阳节活动方案
2014/02/10 职场文书
寄语学生的话
2014/04/10 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
新店开张宣传语
2015/07/13 职场文书
预备党员入党感言
2015/08/01 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python