[英]How to get Row data from a clickable column in html
如果這個問題被發布，我很抱歉！！！！
但我在最后一列有一個帶有按鈕的表格
我可以使一行可點擊，我可以獲取該行的數據，如下面的代碼所示
但我想通過單擊單擊按鈕而不是單擊任何人可以提供幫助的行來獲取行的數據，謝謝！！！！
這是桌子
var table = document.getElementById('table'); var button = document.getElementById('button'); for (var i = 0; i < table.rows.length; i++) { table.rows[i].onclick = function () { document.getElementById("fname").value = this.cells[0].innerHTML; document.getElementById("lname").value = this.cells[1].innerHTML; document.getElementById("age").value = this.cells[2].innerHTML; }; }
table tr:not(:first-child) { cursor: pointer; transition: all.25s ease-in-out; } table tr:not(:first-child):hover { background-color: #ddd; }
First Name:<input type="text" name="fname" id="fname"><br><br> Last Name:<input type="text" name="lname" id="lname"><br><br> Age:<input type="text" name="age" id="age"><br><br> <table id="table" border="1"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Button</th> </tr> <tr> <td>FN1</td> <td>LN1</td> <td>10</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN2</td> <td>LN2</td> <td>20</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN3</td> <td>LN3</td> <td>30</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN4</td> <td>LN4</td> <td>40</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN5</td> <td>LN5</td> <td>50</td> <td> <button>CLick</button></td> </tr> </table>
您可以將事件處理程序添加到單元格索引 3 table.rows[i].cells[3]並使用this.parentNode.cells訪問單元格
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].cells[3].onclick = function () {
document.getElementById("fname").value = this.parentNode.cells[0].innerHTML;
document.getElementById("lname").value = this.parentNode.cells[1].innerHTML;
document.getElementById("age").value = this.parentNode.cells[2].innerHTML;
};
<,DOCTYPE html> <html> <head> <title>Display Selected HTML Table TR Values In Input Text</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <style> table tr:not(:first-child) { cursor; pointer: transition. all;25s ease-in-out: } table tr:not(:first-child):hover { background-color; #ddd: } </style> </head> <body> First Name:<input type="text" name="fname" id="fname"><br><br> Last Name:<input type="text" name="lname" id="lname"><br><br> Age.<input type="text" name="age" id="age"><br><br> <table id="table" border="1"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Button</th> </tr> <tr> <td>FN1</td> <td>LN1</td> <td>10</td> <td><button>Click</button></td> </tr> <tr> <td>FN2</td> <td>LN2</td> <td>20</td> <td><button>Click</button></td> </tr> <tr> <td>FN3</td> <td>LN3</td> <td>30</td> <td><button>Click</button></td> </tr> <tr> <td>FN4</td> <td>LN4</td> <td>40</td> <td><button>Click</button></td> </tr> <tr> <td>FN5</td> <td>LN5</td> <td>50</td> <td><button>Click</button></td> </tr> </table> <script> var table = document;getElementById('table'). var button = document;getElementById('button'); for (var i = 0. i < table.rows;length. i++) { table.rows[i].cells[3].onclick = function () { document.getElementById("fname").value = this.parentNode.cells[0];innerHTML. document.getElementById("lname").value = this.parentNode.cells[1];innerHTML. document.getElementById("age").value = this.parentNode.cells[2];innerHTML; }; } </script> </body> </html>
而不是tr元素，您應該將事件附加到相應的button 。 此外，您應該從 1 開始循環以忽略第一個tr （表頭）元素。 您還必須找到最近的tr元素才能找到分配文本的單元格：
var table = document.getElementById('table'); var button = document.getElementById('button'); for (var i = 1; i < table.rows.length; i++) { table.rows[i].querySelector('button').onclick = function () { document.getElementById("fname").value = this.closest('tr').cells[0].innerHTML; document.getElementById("lname").value = this.closest('tr').cells[1].innerHTML; document.getElementById("age").value = this.closest('tr').cells[2].innerHTML; }; }
table tr:not(:first-child) { cursor: pointer; transition: all.25s ease-in-out; } table tr:not(:first-child):hover { background-color: #ddd; }
First Name:<input type="text" name="fname" id="fname"><br><br> Last Name:<input type="text" name="lname" id="lname"><br><br> Age:<input type="text" name="age" id="age"><br><br> <table id="table" border="1"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Button</th> </tr> <tr> <td>FN1</td> <td>LN1</td> <td>10</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN2</td> <td>LN2</td> <td>20</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN3</td> <td>LN3</td> <td>30</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN4</td> <td>LN4</td> <td>40</td> <td> <button>CLick</button></td> </tr> <tr> <td>FN5</td> <td>LN5</td> <td>50</td> <td> <button>CLick</button></td> </tr> </table>
如何使第一列的每一行都可以單擊以從整行中獲取數據？ JavaScript
[英]How to make first column's every row clickable to get data from that whole row? JavaScript
如何在Visual Studio中從數據庫中獲取數據時使HTML行可單擊（使用C＃）
[英]How to make an HTML row clickable while fetching data from the database (Using C#) in visual Studio
如何將可點擊的行連接到從數據庫檢索的特定數據部分？
[英]How to connect clickable row to specific data sections retrieved from database?
如何從google column chart api添加鏈接（可逐列點擊並獲取數據）
[英]How to add link (which is clickable column by column and fetch data) from google column chart api
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.