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. Web性能优化方案

    第一章 打开网站慢现状分析 在公司访问部署在IDC机房的VIP网站时会感觉很慢.是什么原因造成的?为了缩短页面的响应时间,改进我们的用户体验,我们需要知道用户的时间花在等待什么东西上. 可以跟踪一下我 ...

  2. REF CURSOR和CURSOR

    REF CURSOR DECLARE TYPE TY_EMP_CUR IS REF CURSOR; V_Emp_Cur TY_EMP_CUR; V_Id EMP.ID%TYPE; BEGIN OPEN ...

  3. Python学习之路——模块

    一.模块: 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需 ...

  4. nginx启动

    查看nginx的进程 ps -ef | grep nginx 重启nginx的3种办法1.service nginx restart2.改了配置文件让其生效办法 nginx -s reload3.到n ...

  5. Android 网络交互之MD5为什么要加盐

    MD5为什么要加盐 之前面试的时候,遇到一个面试的哥哥.不停的跟我确认我对网络传输过程中的password进行MD5加密的时候,是否加key了. 当时我很纳闷,因为MD5本身已经是不可逆的了,需要破解 ...

  6. The Priest Mathematician

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=31329#problem/F f[0] = 1 , f[ i ] = f[ i - 1 ] ...

  7. VC++网络高级编程

    内含<VC网络高级编程>电子书 及源代码. 第一章.TCP/IP协议.第二章.Winsock网络编程接口:第二章.Visual C++与网络编程:第四章.基本网络编程技术:第五章.Teln ...

  8. nginx源代码学习资源（不断更新）

    nginx源代码学习是一个痛苦又快乐的过程,以下列出了一些nginx的学习资源. 首先要做的当然是下载一份nginx源代码,能够从nginx官方站点下载一份最新的. 看了nginx源代码,发现这是一份 ...

  9. C++之字符串分割函数split

    c++之字符串分割: /* *c++之字符串分割: */ #include <iostream> #include <string> #include <vector&g ...

  10. UDP包结构

    UDP包结构  // 参考: http://www.2cto.com/net/201307/224715.html UDP数据包由首部和数据组成,每行4个字节(32位),首部固定长度为8个字节(2行) ...