How To Set Selected HTML Table Row Data Into TextBoxes Using Javascript
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>
<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>
OUTPUT:
3 comments
commentshttps://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element
Replybes
ReplyI need small help in my web application please help me, please provide your contact information or you can contact me through email haritechsolutions.hari@gmail.com
Reply