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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 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
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
js实现每日签到功能
2018/11/29 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python实现将文本转换成语音的方法
2015/05/28 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
用Python制作音乐海报
2021/01/26 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
大二自我鉴定范文
2013/10/05 职场文书
内业资料员岗位职责
2014/01/04 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
干部培训简讯
2015/07/20 职场文书
股权投资协议书
2016/03/23 职场文书
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
MongoDB使用场景总结
2022/02/24 MongoDB