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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
jquery tab标签页的制作
2010/05/10 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
线程和进程的区别及Python代码实例
2015/02/04 Python
Python定时执行之Timer用法示例
2015/05/27 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python3实现绘制二维点图
2019/12/04 Python
python yield和Generator函数用法详解
2020/02/10 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
怎样写好自我鉴定
2013/12/04 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
防灾减灾活动总结
2014/08/30 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android