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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
es6函数之箭头函数用法实例详解
Apr 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代码把全角数字转为半角数字
2007/12/10 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
php框架知识点的整理和补充
2021/03/01 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
js闭包用法实例详解
2016/12/13 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
2020/09/22 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
虚拟机下载python是否需要联网
2020/07/27 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
创先争优活动个人总结
2015/03/04 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
MySQL 服务和数据库管理
2021/11/11 MySQL
springcloud整合seata
2022/05/20 Java/Android