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 相关文章推荐
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
innerText 使用示例
Jan 23 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
js实现橱窗展示效果
Jan 11 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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
简单实现python画圆功能
2018/01/25 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
工程质量月活动方案
2014/02/19 职场文书
办公室副主任职责范本
2014/03/08 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014年环保工作总结
2014/11/26 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
教师远程培训心得体会
2016/01/09 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
z-index不起作用
2021/03/31 HTML / CSS