功能: 点击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. Dynamics CRM 本地插件注册器连CRMAn unsecured or incorrectly secured fault was received from the other party

    今天遇到个问题,在本地打开插件注册器连接到远程CRM服务器时报如下问题 但我在CRM服务器上连接注册器是可以打开的,所以不存在账号权限这类的问题了(当然我用的是超管的账号也不可能存在),最后查询得知是 ...

  2. C++语言编译系统提供的内部数据类型的自动隐式转换

    C++语言编译系统提供的内部数据类型的自动隐式转换规则如下: 程序在执行算术运算时,低类型自动隐式转换为高类型. 在函数调用时,将实参值赋给形参,系统隐式的将实参转换为形参的类型,并赋值给形参. 函数 ...

  3. hive 压缩全解读(hive表存储格式以及外部表直接加载压缩格式数据)；HADOOP存储数据压缩方案对比（LZO,gz，ORC）

    数据做压缩和解压缩会增加CPU的开销,但可以最大程度的减少文件所需的磁盘空间和网络I/O的开销,所以最好对那些I/O密集型的作业使用数据压缩,cpu密集型,使用压缩反而会降低性能. 而hive中间结果 ...

  4. Java进阶(四十五)java 字节流与字符流的区别

    java 字节流与字符流的区别(转载)   字节流与和字符流的使用非常相似,两者除了操作代码上的不同之外,是否还有其他的不同呢?   实际上字节流在操作时本身不会用到缓冲区(内存),是文件本身直接操作 ...

  5. Dialog样式的Activity

    效果图: 设置全屏模式: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

  6. jvm java虚拟机 新生代的配置

    1.1.1.1. -Xmn参数 参数-Xmn1m可以用于设置新生代的大小.设置一个较大的新生代会影响老生代的大小,因为这两者的总和是一定的,这个系统参数对于系统性能以及GC行为有很大的影响,新生代一般 ...

  7. 查看apk签名信息

    经常在注册开发者的时候会遇到要求填写申请应用的应用签名: 有两种很方便的方法: 1.如果没有源码或者没有打开eclipse,直接下载这个应用应用下载链接 使用截图,只要把包名输入,自动会出现签名信息. ...

  8. 5.0、Android Studio调试你的应用

    Android Studio包含了一个调试器,允许你调试运行在Android虚拟机或连接的Android设备的应用.通过Android Studio的调试器,你可以: 1. 选择你调试设备的app 2 ...

  9. 插件开发之360 DroidPlugin源码分析（一）初识

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52123450 DroidPlugin的是什么? 一种新的插件机制,一种免安装的运行机制 ...

  10. Android简易实战教程--第五话《开发一键锁屏应用》

    转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/51860900 点击打开链接 Device Administration 对于这个应 ...