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

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

表格包含多行,每行都包含多列。同时,每一列都包含多个HTML元素或文本。

在这里,我们将在每个表格行上添加提交按钮,根据按钮的点击,我们将访问该行的数据。我们将使用JavaScript和jQuery来访问行数据,之后,用户可以使用API等将其发送到任何地方,任何他们想要的地方。

使用JavaScript来访问行数据

在这种方法中,我们将访问第一个被点击的元素。我们将根据点击的元素找到它的父元素,给我们一个特定的列。之后,我们可以找到该列的父元素,给我们一个行。接下来,我们可以访问该行的所有列和它的数据。

语法

用户可以按照下面的语法来使用JavaScript访问行数据。

var clickedRow = clickedElement.parentNode.parentNode.id;
var rowData = document.getElementById(clickedRow).querySelectorAll('.column-data');
let text = rowData[0].innerHTML; 

在上面的语法中,clickedRow包含按钮被点击的那一行的id。rowData包含了某一特定行的所有列。之后,我们可以从数组中访问每一列,并可以使用innerHTML属性来访问该列的HTML

例子

在下面的例子中,我们已经创建了表格并将学生的信息添加到表格中。我们还在表中添加了提交列;每一行都包含提交按钮。

在JavaScript中,我们为每个按钮添加了点击事件监听器,当用户点击上述按钮时,它就会访问被点击元素的行。之后,它访问该行的所有列。

在输出中,用户可以观察到被点击行的数据。

<html>
<body>
   <h2>Accessing the <i> row data of table </i> using JavaScript</h2>
   <table class = "table">
      <tbody>
         <tr>
            <th> Sr. NO </th>
            <th> Student_name </th>
            <th> Course </th>
            <th> Graduation Year </th>
            <th> Submit Data </th>
         </tr>
         <tr id = "row1">
            <th> 1 </th>
               <td class = "column-data"> Shubham </td>
               <td class = "column-data"> CSE </td>
               <td class = "column-data"> 2023 </td>
               <td> <input type = "button" value = "Submit Data" class = "inp"/></td>
         </tr>
         <tr id = "row2">
            <th> 2 </th>
               <td class = "column-data"> Alice </td>
               <td class = "column-data"> CSE </td>
               <td class = "column-data"> 2022 </td>
               <td> <input type = "button" value = "Submit Data" class = "inp"/> </td>
         </tr>
         <tr id = "row3">
            <th> 3 </th> 
               <td class = "column-data"> Bob </td>
               <td class = "column-data"> B.SC. Maths </td>
               <td class = "column-data"> 2021 </td>
               <td> <input type = "button" value = "Submit Data" class = "inp"/></td>
         </tr>
         <tr id = "row4">
            <th> 4 </th>
               <td class = "column-data"> Jems </td>
               <td class = "column-data"> EC </td>
               <td class = "column-data"> 2025 </td>
               <td> <input type = "button" value = "Submit Data" class = "inp"/></td>
         </tr>
      </tbody>
   </table>
   <div id = "output"> </div>
   <script>
      let allButtons = document.getElementsByClassName('inp');
      for (let button of allButtons) {
         button.addEventListener('click', () => {
            var clickedElement = event.target
            var clickedRow = clickedElement.parentNode.parentNode.id;
            var rowData = document.getElementById(clickedRow).querySelectorAll('.columndata');
            let Student_name = rowData[0].innerHTML;
            let course = rowData[1].innerHTML;
            let year = rowData[2].innerHTML; 
            let output = document.getElementById('output');
            output.innerHTML = "The submited row data are : <br>";
            output.innerHTML += `name - {Student_name}, course -{course}, Graduation year - ${year}`;
         });
      }
   </script>
</body>
</html>

使用JQuery来访问行数据

在JQuery中,我们可以检测到输入的点击事件,并使用closest()方法找到离被点击的输入最近的行。之后,我们可以使用JQuery访问该行的每一列。

语法

用户可以按照下面的语法来使用JQuery来访问被点击的行的数据。

$(".inp").click(function () {
   var $row = $(this).closest("tr");
   var $text = $row.find(".class").text(); 
}); 

在上面的语法中,我们使用了closest()方法,通过传递’tr’作为参数来寻找最近的表行。之后,我们使用find()和text()方法来获取特定列的文本。

例子

在下面的例子中,我们已经创建了一个包含各种房屋信息的表格。当用户点击任何一行的 “提交数据 “按钮时,它访问该行的数据并显示在屏幕上。

<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="noreferrer"></script>
</head>
<body>
   <h2> Accessing the <i> row data of table </i> using JQuery.</h2>
   <table class = "table">
      <tbody>
         <tr>
            <th> House No. </th>
            <th> Area </th>
            <th> Color </th>
            <th> Rooms </th>
            <th> Submit </th>
         </tr>
         <tr id = "rowA">
            <th> A </th>
               <td class="column-data1"> 3600 Sq. feet </td> 
               <td class="column-data2"> Aqua </td>
               <td class="column-data3"> 4 </td>
               <td> <input type="button" value="Submit Data" class="inp" /></td>
         </tr>
         <tr id = "rowB">
            <th> B </th>
               <td class="column-data1"> 2500 Sq. feet </td>
               <td class="column-data2"> Pink </td>
               <td class="column-data3"> 3 </td>
               <td> <input type="button" value="Submit Data" class="inp" /></td>
         </tr>
         <tr id = "rowC">
            <th> C </th>
            <td class="column-data1"> 1500 Sq. feet </td>
            <td class="column-data2"> Blue </td>
            <td class="column-data3"> 2 </td>
            <td> <input type="button" value="Submit Data" class="inp" /></td>
         </tr>
         <tr id = "rowD">
            <th> D </th>
            <td class="column-data1"> 500 Sq. feet </td>
            <td class="column-data2"> grey </td>
            <td class="column-data3"> 5 </td>
            <td> <input type="button" value="Submit Data" class="inp" /></td>
         </tr>
      </tbody>
   </table>
   <div id = "output"> </div>
   <script>
      (".inp").click(function () {
         varrow = (this).closest("tr");
         varArea = row.find(".column-data1").text();
         varcolor = row.find(".column-data2").text();
         varroom = row.find(".column-data3").text();('#output').html(`The values submited are : <br> Area - {Area}, color - {color}, Total Rooms - {room}`);
      });
   </script>
</body>
</html>

我们已经看到了两种访问被点击的表行数据的方法。用户可以对数据进行操作,将其发送到应用程序的后台,或者从其他资源请求数据。

在第一种方法中,我们以数组的形式获得该行的所有列。在第二种方法中,我们需要使用类名或其他标识符分别访问每一列。另外,用户可以使用各种JavaScript方法进一步操作这两种方法。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

JavaScript 示例