JavaScript 如何在点击按钮时发送行数据

在本文中，我们将学习如何使用JavaScript在点击按钮时发送并访问行数据。

下面的示例包含一个简单的Bootstrap表格。每个表格行（<tr>）都有一个id和一个提交按钮。当点击与某一行对应的按钮时，使用一个警告框显示该行的数据。

方法： 我们使用“event.target.parentNode.parentNode.id”来获取被点击按钮所在行的行id。这里，“event.target”返回触发事件（点击按钮）的元素（即<input>）。“event.target.parentNode”指的是<input>的父元素，即<td>。“event.target.parentNode.parentNode()”指的是<td>的父元素，即<tr>。因此，var rowId存储了被点击按钮所在行的id。

现在我们想要访问这个特定行内的数据。所有的数据元素都具有class为“row-data”。通过使用document.getElementById(rowId).querySelectorAll('.row-data')可以获取具有给定rowId的元素（行）内所有class为“row-data”的元素数组。该数组存储在var“data”变量中。我们可以使用data[0]、innerHTML（name）等访问数据。

示例： 这个示例展示了上述的方法。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
          crossorigin="anonymous" />
</head>
 
<body>
    <!-- Bootstrap table -->
    <table class="table">
        <tbody>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
                <th scope="col">Submit</th>
            </tr>
 
            <tr id="1">
                <th scope="row">1</th>
                <td class="row-data">Sara</td>
                <td class="row-data">23</td>
                <td><input type="button" value="submit"
                           onclick="show()" />
                  </td>
            </tr>
 
            <tr id="2">
                <th scope="row">2</th>
                <td class="row-data">John</td>
                <td class="row-data">30</td>
                <td><input type="button" value="submit"
                           onclick="show()" />
                  </td>
            </tr>
 
            <tr id="3">
                <th scope="row">3</th>
                <td class="row-data">Naman</td>
                <td class="row-data">20</td>
                <td><input type="button" value="submit"
                           onclick="show()" />
                  </td>
            </tr>
        </tbody>
    </table>
 
    <script>
        function show() {
            var rowId =
                event.target.parentNode.parentNode.id;
        //this gives id of tr whose button was clicked
            var data =
        document.getElementById(rowId).querySelectorAll(".row-data");
        /*returns array of all elements with
        "row-data" class within the row with given id*/
         
            var name = data[0].innerHTML;
            var age = data[1].innerHTML;
         
            alert("Name: " + name + "\nAge: " + age);
        }
    </script>
</body>
</html>

输出：

JavaScript 如何在点击按钮时发送行数据