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 相关文章推荐
用于table内容排序
Jul 21 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue中created和mounted的区别浅析
Aug 13 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
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
JavaScript的Function详细
2006/11/14 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
详解js 创建对象的几种方法
2019/03/08 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python中的decimal类型转换实例详解
2019/06/26 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python自动识别文本编码格式代码
2019/12/26 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
儿媳婚宴答谢词
2014/01/14 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
小学新课改心得体会
2016/01/22 职场文书