极客笔记如何在点击按钮时使用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方法进一步操作这两种方法。