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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
js数组去重的hash方法
2016/12/22 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python3中数组逆序输出方法
2020/12/01 Python
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
2014年端午节活动方案
2014/03/11 职场文书
社区矫正工作方案
2014/06/04 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014年技术部工作总结
2014/12/12 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
员工辞职信怎么写
2015/02/27 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS