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 相关文章推荐
调整小数的格式保留小数点后两位
May 14 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
Javascript之Math对象详解
Jun 07 Javascript
JS中递归函数
Jun 17 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
深入理解javascript原型链和继承
2014/09/23 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python中为什么要用self探讨
2015/04/14 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
小学生获奖感言范文
2014/02/02 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
消防标语大全
2014/06/07 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
外贸英文求职信范文
2015/03/19 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS