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

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

哭的好伤心

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

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43678748/article/details/84032593

本文介绍了一种通过JavaScript实现的表格数据抓取方法，当点击表格的任一单元格时，能够获取整行的数据，并展示如何通过两种不同方式实现此功能。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

功能: 点击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>