JS - 获取所点击的table行内容

风轻轻~

已于 2022-06-28 17:02:26 修改

阅读量6.6k

点赞数 3

分类专栏： # 前端基础__JS - 表格文章标签： javascript

于 2020-01-14 14:55:43 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/103973225

版权

前端基础__JS - 表格专栏收录该内容

4 篇文章 0 订阅

订阅专栏

获取所点击的table行内容

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>获取所点击的table行内容</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <table id="table" border="1"cellspacing="0">
        <thead>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>一行一列</td>
                <td>一行二列</td>
                <td>一行三列</td>
                <td>
                    <button onclick="getThis()">click</button>
                </td>
            </tr>
            <tr>
                <td>二行一列</td>
                <td>二行二列</td>
                <td>二行三列</td>
                <td>
                    <button onclick="getThis()">click</button>
                </td>
            </tr>
            <tr>
                <td>三行一列</td>
                <td>三行二列</td>
                <td>三行三列</td>
                <td>
                    <button onclick="getThis()">click</button>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        function getThis() {
            var tab = document.getElementById("table")
            var tr = tab.getElementsByTagName("tr")
            for (var i = 0; i < tr.length; i++)tr[i].onclick = function () {
                var thisTR = this.innerHTML;//所点击的一行内容
                var tow = $(this).children().eq(1).text();//所点击的一行的第二个td内容
            }
        }
    </script>
</body>
</html>