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 相关文章推荐
JavaScript学习笔记(十)
Jan 17 Javascript
优化javascript的执行速度
Jan 23 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
Node.js assert断言原理与用法分析
Jan 04 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
如何在JavaScript中等分数组的实现
Dec 13 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP中strtotime函数使用方法分享
2012/01/10 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php显示页码分页类的封装
2017/06/08 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript中的闭包
2016/02/24 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python简单商城购物车实例代码
2018/03/15 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
浅析python内置模块collections
2019/11/15 Python
Python Django路径配置实现过程解析
2020/11/05 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
如何开启linux的ssh服务
2013/06/03 面试题
个人安全承诺书
2014/05/22 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis