How to get Row data from a clickable column in html

Question

I am sorry if this question is posted!!!

but i have a table with the button at the last column

i can make a row clickable and i can fetch the data of the row as shown in the code below

but i want to get the data of the row by clicking the click button not by clicking the row anyone can help will be appreciated Thank You!!!!

here is the table

 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>

Answer 1

You can add event handler to cell index 3 table.rows[i].cells[3] and use this.parentNode.cells to access cell

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>

Answer 2

Instead of the tr element you should attach the event to the corresponding button . Also, you should start the loop from 1 to ignore the first tr (table header) element. You also have to find the closest tr element to find the cells to assign the text:

 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>

How to get Row data from a clickable column in html

Question

2 answers

solution1
1 2020-04-23 12:02:37

solution2
1 ACCPTED 2020-04-23 12:05:45

How to get Row data from a clickable column in html

Question

2 answers

solution1 1 2020-04-23 12:02:37

solution2 1 ACCPTED 2020-04-23 12:05:45

solution1
1 2020-04-23 12:02:37

solution2
1 ACCPTED 2020-04-23 12:05:45