功能: 点击table中的某一个td,获得这个tr的所有数据

效果图

<html>
<head>
<script>
    function getData2(element){
        document.getElementById("name").value=element.children[0].innerHTML;
        document.getElementById("xuehao").value=element.children[1].innerHTML;
    }
</script>
</head>
<body>
    <table border="1">
        <tr >
            <td>学号</td>
            <td>姓名</td>
        </tr>
        <tr onclick=getData2(this) >
            <td>AAAAAAAAAAA</td>
            <td>张三 </td>
        </tr>
        <tr onclick=getData2(this) >
            <td>BBBBBBBBBB</td>
            <td>李四</td>
        </tr>
    </table>
    </br>
    </br>
<input type="text" id="name" name="name" />
<input type="text" id="xuehao" name="xuehao" />

</body>
</html>

当然还有另外一种方式,我直接在javascript里面给所有的tr加上onclick属性#

<html>
<head>
<script>

    function getData(){
        document.getElementById("name").value=this.children[0].innerHTML;
        document.getElementById("xuehao").value=this.children[1].innerHTML;
    }

</script>
</head>
<body>
    <table border="1">
        <tr >
            <td>学号</td>
            <td>姓名</td>
        </tr>
        <tr  >
            <td>AAAAAAAAAAA</td>
            <td>张三 </td>
        </tr>
        <tr  >
            <td>BBBBBBBBBB</td>
            <td>李四</td>
        </tr>
    </table>
    </br>
    </br>
<input type="text" id="name" name="name" />
<input type="text" id="xuehao" name="xuehao" />

    <script type="text/javascript">
    var tds=document.getElementsByTagName("tr");
    var obj=null;
    for(var i=1,len=tds.length;i<len;i++){
        obj=tds[i];
        obj.onclick=getData;  //这里没有括号
    }

    </script>

</body>
</html>

对于这两种方法,我不懂的是为什么一个getData()没有参数,getData2(element)却有参数

点击table中的某一个td,获得这个tr的所有数据的更多相关文章

  1. table 中 文字长度大于td宽度，导致文字换行 解决方案

    1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...

  2. vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th

    本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...

  3. table中绝对定位元素相对td定位失效解决方案

    开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...

  4. js遍历table中的每一个元素

    function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...

  5. JS实现点击table中任意元素选中

    上项目开发,忙的焦头烂额,博客也没咋更新了. 昨天老师提了个需求,简单的小例子,选择tr中任一行选中tr,觉得很有意思,记录一下: 上代码 <!DOCTYPE html> <html ...

  6. javascript做的一个根据table中某个td的值为日期时的倒计时

    JavaScript代码: <script> window.onload = window.onload = function () { getTdValue(); } //根据传过来的天 ...

  7. js穿梭框；将两个table中的数据选中移动

    将table中选中的数据移动到右边: 点击一行中的任意一个位置,使其选中: 注:attr()和prop()都是jquery的方法: .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 ...

  8. js的传值，table中tr的遍历，js中动态创建数组

    1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...

  9. table中tr或者td的点击事件

    直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...

随机推荐

  1. Maven之（六）setting.xml配置文件详解

    setting.xml配置文件 maven的配置文件settings.xml存在于两个地方: 1.安装的地方:${M2_HOME}/conf/settings.xml 2.用户的目录:${user.h ...

  2. Python 3.3.3 使用requests模拟登录网站

    在模拟登录上,requests确实比python标准库中的相关模块更加简洁. 假设你需要去爬一组页面(targetUrls),而这些页面要登录才能进行访问.那么requests能够提供一种相当简单的语 ...

  3. 微信开发之使用java获取签名signature（贴源码，附工程）

    一.前言 微信接口调用验证最终需要用到的三个参数noncestr.timestamp.signature: 接下来将会给出获取这三个参数的详细代码 本文的环境eclipse + maven 本文使用到 ...

  4. JVM概述

    JVM是什么 JVM全称是Java Virtual Machine(java虚拟机).它之所以被称之为是"虚拟"的,就是因为它仅仅是由一个规范来定义的抽象计算机.我们平时经常使用的 ...

  5. activity的启动模式和栈管理

     在学习Android的过程中,Intent是我们最常用Android用于进程内或进程间通信的机制,其底层的通信是以Binder机制实现的,在物理层则是通过共享内存的方式实现的.     Intent ...

  6. Android播放在线音乐文件

    Android播放在线音频文件 效果图: 源码下载地址: http://download.csdn.net/detail/q4878802/9020687 添加网络权限: <uses-permi ...

  7. 使用Geolocation校正GDAL不支持的数据

    对于低分数据来说,常用的校正方式就是给定数据的经纬度查找表来进行校正.在GDAL中,这种校正方式叫Geolocation array.常用的数据有国外的MODIS数据,国内的如风云系列(FY)和海洋系 ...

  8. 极光推送---安卓Demo

    对于一个一直干.net的程序媛来说,冷不丁的让小编干安卓,那种感觉就好似小狗狗咬小刺猬一样,不知道从哪儿开始下手,对于小编来说,既是挑战更是机遇,因为知识都是相通的,再者来说,在小编的程序人生中,留下 ...

  9. Android的GridView的用法-android学习之旅（二十七）

    Gridview简介 GridView和ListView有相同的父类AbsListView.他和ListView唯一的区别是Gridview可以显示多列,如果不设置列数,就默认显示一列,变成了List ...

  10. 输入过滤器——InputFilter

    一般情况下我们通过请求体读取器InputStreamInputBuffer获取的仅仅是源数据,即未经过任何处理发送方发来的字节.但有些时候在这个读取的过程中希望做一些额外的处理,并且这些额外处理可能是 ...