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中的location用法简单介绍
Mar 07 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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入门教程之表单与验证实例详解
2016/09/11 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
JavaScript复制变量三种方法实例详解
2020/01/09 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python 文件查找及内容匹配方法
2018/10/25 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
pytorch 常用线性函数详解
2020/01/15 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
尽职尽责村干部自我鉴定
2014/01/23 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
党员组织关系介绍信
2014/02/13 职场文书
食品安全责任书
2014/04/15 职场文书
节约用水演讲稿
2014/05/21 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
公司领导班子对照材料
2014/08/18 职场文书
婚庆答谢词
2015/01/04 职场文书
银行给客户的感谢信
2015/01/23 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
经费申请报告范文
2015/05/18 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
教师反邪教心得体会
2016/01/15 职场文书
导游词之崇武古城
2019/10/07 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python