JavaScript实现获取table中某一列的值

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）初始化时

（2）单击第二列时

JavaScript实现获取table中某一列的值的更多相关文章

  1. JavaScript获取table中某一列的值的方法

    1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. 用JavaScript，获取Table中指定的行、列

    前言: 先要谢谢George Wing的慷慨赠书<悟透JavaScript>,让我更加感受到了技术交流的重要性,呵呵~ 进入正题,面试题中有一题:如何通过JavaScript获取Table ...

  3. javascript闭包获取table中tr的索引 分类： JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏

    使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  5. AutoIt获取Gridview中可以修改列的值

    有一个界面如上图:黑色框框部分是一个整体,也是一个gridview,如果我想把框框中右侧数据获取出来,该如何操作? 我尝试过了很多途径,都无法成功. 今天,我发现,当鼠标焦点在黑色框框左侧的部分的时候 ...

  6. Jquery 获取table中的td元素的值

    <table id="t1"> <tr> <td> 1-1 </td> <td> 1-2 </td> < ...

  7. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  8. js循环获取table中的值

    <script type="text/javascript"> function getTdValue() { var tableId = document.getEl ...

  9. 合并table中某一列相邻的相同的行

    合并table中某一列相邻的相同的行​1. [代码]合并table中某一列相邻的相同的行  <!DOCTYPE html><html>    <head>      ...

随机推荐

  1. SSL证书与Https应用部署小结

    为了提高网站的安全性,一般会在比较敏感的部分页面采用https传输,比如注册.登录.控制台等.像Gmail.网银等全部采用https传输. https/ssl 主要起到两个作用:网站认证.内容加密传输 ...

  2. 设计模式多线程方面之Thread-Per-Message 模式

    Thread-Per-Message模式是一个很简单但很常应用的模式,尤其是在GUI程式中,我们举个例子,当您设计一个文件编辑器时,您可能像这样注册一个开启档案的事件处理:  menuOpenFile ...

  3. Linux的环境变量总结

    请见Github博客:http://wuxichen.github.io/Myblog/linux/2014/10/11/LinuxEnvironmentVariables.html

  4. Android ListView两种长按弹出菜单方式

    转自:http://www.cnblogs.com/yejiurui/p/3247527.html package com.wyl.download_demo; import java.util.Ar ...

  5. javascript面向对象创建高级 Web 应用程序

       目录 JavaScript 对象是词典 JavaScript 函数是最棒的 构造函数而不是类 原型 静态属性和方法 闭包 模拟私有属性 从类继承 模拟命名空间 应当这样编写 JavaScript ...

  6. USACO Party Lamps 【Binary code solvution】【规律】

    写这道题目的时候遇到了一个令人诧异的问题,就是平台上跑来的结果和我本机跑起来的结果不一样. 后来Debug了之后才发现是我数组开小了,只开到100 的数组竟然都去访问他170位的地址肯定要跪成翔啊.. ...

  7. CPU保护模式深入探秘

    原文链接为:http://www.chinaunix.net/old_jh/23/483510.html 保护方式的体系结构 主要问题:          保护方式的寄存器模型          保护 ...

  8. 感觉Release有时比Debug要健壮

    评估文件夹大小的时候,直接跨线程操作UI界面,Debug崩溃,Release不崩溃. 更多的一种情况是,本机DEBUG下不崩溃,把RELEASE版本到别的机子上,立刻崩溃(登录框的进度条的对象为空,仍 ...

  9. Qt学习：线程间共享数据（使用信号槽传递数据，必须提前使用qRegisterMetaType来注册参数的类型）

    Qt线程间共享数据主要有两种方式: 使用共享内存.即使用一个两个线程都能够共享的变量(如全局变量),这样两个线程都能够访问和修改该变量,从而达到共享数据的目的: 使用singal/slot机制,把数据 ...

  10. AWVS介绍(转)

    使用AWVS对域名进行全局分析,深入探索: 首先,介绍一下AWVS这个工具. Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网 ...