資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 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(); });
在上面的語法中，我們透過傳遞 'tr' 作為引數使用 closest() 方法來查詢最近的表格行。之後，我們使用 find() 和 text() 方法獲取特定列的文字。
示例
在下面的示例中，我們建立了一個包含各種房屋資訊的表格。當用戶點選任何行的“提交資料”按鈕輸入時，它會訪問行資料並在螢幕上顯示它。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" 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 () {
var $row = $(this).closest("tr");
var $Area = $row.find(".column-data1").text();
var $color = $row.find(".column-data2").text();
var $room = $row.find(".column-data3").text();
$('#output').html(`The values submited are : <br> Area - ${$Area}, color - ${$color}, Total Rooms - ${$room}`);
});
</script>
</body>
</html>
我們已經看到了兩種訪問被點選表格行資料的 方法。使用者可以操作資料以傳送到應用程式的後端或請求其他資源的資料。
在第一種方法中，我們將該行的所有列以陣列的形式獲取。在第二種方法中，我們需要使用類名或其他識別符號分別訪問每一列。此外，使用者還可以使用各種 JavaScript 方法進一步操作這兩種方法。
更新於：2023年2月22日
8K+ 瀏覽量
廣告