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 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
JS解析XML的实现代码
Nov 12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
老生常谈js中的MVC
Jul 25 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
详解PHP归并排序的实现
2016/10/18 PHP
jquery创建div 实现代码
2009/04/27 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
Python 不同对象比较大小示例探讨
2014/08/21 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python中bytes和str类型的区别
2019/10/21 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
事业单位竞聘上岗实施方案
2014/03/28 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
暑期培训班策划方案
2014/08/26 职场文书
运动会200米广播稿
2015/08/19 职场文书
新课程改革心得体会
2016/01/22 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书