功能: 点击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. uboot-tiny4412启动流程(下)----如何将自己的裸板测试程序加入uboot中启动测试

    今天在工作上搞了一天高通的芯片uboot程序,目的是希望将一个裸板的程序移植到uboot中,并且开机让它运行.这个芯片是NXP4330,目前是高通的一个芯片,基于ARM-contexA9架构,那么就跟 ...

  2. Android的Spinner控件用法解析

    微调框 微调框提供一种方法,让用户可以从值集中快速选择一个值.默认状态下,微调框显示其当前所选的值. 触摸微调框可显示下拉菜单,其中列有所有其他可用值,用户可从中选择一个新值. 您可以使用 Spinn ...

  3. 2017年校园招聘ios面试题

    一.搜狐快站 1.谈谈你做过的项目: 2.项目中最有成就感的部分: 3.倒计时如何实现?(NSTimer,还有其他的实现方式吗): 4.UIButton的继承关系? 5.iOS中可以进行输入的控件?( ...

  4. Java多线程的调度策略

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

  5. UNIX网络编程——揭开网络编程常见API的面纱【上】

    Linux网络编程API函数初步剖析 今天我们来分析一下前几篇博文中提到的网络编程中几个核心的API,探究一下当我们调用每个API时,内核中具体做了哪些准备和初始化工作. 1.socket(famil ...

  6. 5.2、Android Studio截图

    Android Monitor允许你截取连接的设备或者虚拟机的屏幕,保存为PNG格式. 设备截图 1. 打开一个项目 2. 在设备或虚拟机中运行应用 3. 显示Android Monitor 4. 切 ...

  7. linux C++多线程操作文件&输出加锁

    下述demo将指定目录下文件存入vector,然后一分为二交给两个线程(threadTask1,threadTask2)去分别处理,对输出函数printDirent加锁防止紊乱. #include & ...

  8. android获取设备唯一标示

    概述 有时需要对用户设备进行标识,所以希望能够得到一个稳定可靠并且唯一的识别码.虽然Android系统中提供了这样设备识别码,但是由于Android系统版本.厂商定制系统中的Bug等限制,稳定性和唯一 ...

  9. python使用qq服务器发送邮件

    python使用qq服务器发送邮件 直接上代码: #!/usr/bin/python2.7 #-*- coding: UTF-8 -*- # sendmail.py # # init created: ...

  10. 07 设置View的显示与隐藏

    在代码中: 例子: <span style="font-size:14px;">ImageButton imageButton = new ImageButton(th ...