JavaScript - Display Selected HTML Table Row Values Into Input Text

How To Set Selected HTML Table Row Data Into TextBoxes Using Javascript

Selected HTML Table Row Values To TextBoxes

In This Javascript Tutorial we will See How To Get Selected Html Table Row Values And Show It In Input Text On Row Click Event Using JS And Netbeans Editor .

Project Source Code:

<!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>
</tr>

<tr>
<td>FN1</td>
<td>LN1</td>
<td>10</td>
</tr>

<tr>
<td>FN2</td>
<td>LN2</td>
<td>20</td>
</tr>

<tr>
<td>FN3</td>
<td>LN3</td>
<td>30</td>
</tr>

<tr>
<td>FN4</td>
<td>LN4</td>
<td>40</td>
</tr>

<tr>
<td>FN5</td>
<td>LN5</td>
<td>50</td>
</tr>
</table>

<script>

var table = document.getElementById('table');

for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("fname").value = this.cells[0].innerHTML;
document.getElementById("lname").value = this.cells[1].innerHTML;
document.getElementById("age").value = this.cells[2].innerHTML;
};
}

</script>

</body>
</html>