功能: 点击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. Objective-C方法的实现

    Objective-C的方法被两种数据类型描述:一个是选择子(SEL),它用来描述方法的名称;另一个是实现(IMP),它用来描述方法被调用时实际执行的代码(它们基本上只是C函数的指针). 类似于SEL ...

  2. 如果用一个循环数组q[0..m-1]表示队列时,该队列只有一个队列头指针front,不设队列尾指针rear，求这个队列中从队列投到队列尾的元素个数（包含队列头、队列尾）。

    #include <iostream> using namespace std; //循环队列(少用一个空间)长度 #define M (8+1) typedef struct node ...

  3. java自动装箱拆箱总结

    对于java1.5引入的自动装箱拆箱,之前只是知道一点点,最近在看一篇博客时发现自己对自动装箱拆箱这个特性了解的太少了,所以今天研究了下这个特性.以下是结合测试代码进行的总结. 测试代码: int a ...

  4. Xcode7.3.1中通过最新的CocoaPod安装pop动画引擎

    CocoaPod是一个用ruby实现,用于方便的管理Xcode中第三方插件的管理器.用它我们可以很方便的安装和升级插件而不用担心破坏原有的项目. 而pop是一个用于实现App中动画的引擎,它是由Fac ...

  5. Java多线程的调度策略

    在Java多线程环境中,为保证所有线程的执行能按照一定的规则执行,JVM实现了一个线程调度器,它定义了线程调度的策略,对于CPU运算的分配都进行了规定,按照这些特定的机制为多个线程分配CPU的使用权. ...

  6. Java集合-----java集合框架常见问题

    1什么是Java集合API Java集合框架API是用来表示和操作集合的统一框架,它包含接口.实现类.以及帮助程序员完成一些编程的算法. 简言之,API在上层完成以下几件事: ● 编程更加省力,提高城 ...

  7. java.util.Arrays类详解（源码总结）

    概述 Arrays类位于java.util包下,是一个对数组操作的工具类.今天详细的看了看Arrays类的4千多行源码,现将Arrays类中的方法做一个总结(JDK版本:1.6.0_34).Array ...

  8. 【NPR】卡通渲染

    写在前面 我的博客讲过好几篇卡通渲染了,比如[Unity Shader实战]卡通风格的Shader(一).[Unity Shader实战]卡通风格的Shader(二).[NPR]漫谈轮廓线的渲染.[S ...

  9. 剑指Offer——滴滴笔试题+知识点总结

    剑指Offer--滴滴笔试题+知识点总结 情景回顾 时间:2016.9.18 15:00-17:00 地点:山东省网络环境智能计算技术重点实验室 事件:滴滴笔试   总体来说,滴滴笔试内容体量不算多, ...

  10. 创建一个QT for Android的传感器应用应用程序（摘自笔者2015年将出的《QT5权威指南》，本文为试读篇）

     这个手册描述了使用Qt Quick面访的方式在Android和ios设备上开发QtQuick应用程序的方法.我们使用Qt Creator实现一个QtQuick应用程序,这个应用程序基于加速器的值 ...