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之IE的fireEvent方法详细解析
Nov 20 Javascript
javascript中数组中求最大值示例代码
Dec 18 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
第一节--面向对象编程
2006/11/16 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
使用正则替换变量
2007/05/05 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
pandas取出重复数据的方法
2019/07/04 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
python GUI模拟实现计算器
2020/06/22 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
Django rest framework如何自定义用户表
2021/06/09 Python