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

最新推荐文章于 2021-06-07 14:35:21 发布

ruiguang21

最新推荐文章于 2021-06-07 14:35:21 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js jquery

本文链接：https://blog.youkuaiyun.com/ruiguang21/article/details/80212635

js 同时被 2 个专栏收录

26 篇文章

订阅专栏

jquery

23 篇文章

订阅专栏

本文介绍了两种通过点击HTML表格中的行来获取该行内数据的方法，并探讨了JavaScript中处理点击事件的不同方式及其参数传递的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图

   [html] 
   view plaincopy
<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] 
   view plaincopy
<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>  