Ravi Ravi -4 years ago 41
HTML Question

How to update fields respective to the data in table rows for a webpage?

I am trying to update the fields respective to the row I click, so if I click the second row, I would like the fields at the bottom to change respectively, so name goes to first field, email to second, etc. And then if I click on first row then the first row's data should display in those fields.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
<tr >
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr id="Row1" onclick="myFunction();">
<td>Jane Doe</td>
<td>Jane@Jane.com</td>
<td>123</td>
<td>US</td>
</tr>
<tr id="Row2" onclick="myFunction();">
<td>John Doe</td>
<td>John@John.com</td>
<td>321</td>
<td>US</td>
</tr>
</table>
<form>
<br><br>
Name Field:
<input type="text" id="Name"> <br><br>
Email Field:
<input type="text" id="Email"><br><br>
Phone Field:
<input type="text" id="Phone"><br><br>
Address Field:
<input type="text" id="Address"><br><br>
</form>
<script>
function myFunction() {
document.getElementById("Name").value = "Name changes!";
document.getElementById("Email").value = "Email changes!";
document.getElementById("Phone").value = "Phone changes!";
document.getElementById("Address").value = "Address changes!";
}
</script>
</body>
</html>

Answer Source

 table, th, td {
        border: 1px solid black;
    }
<script
  src="https://code.jquery.com/jquery-3.2.1.js"></script>

    <body>

    <table style="width:100%">
      <tr >
        <th id="name">Name</th>
        <th id="email">Email</th>
        <th id="phone">Phone</th>
        <th id="addr">Address</th>
      </tr>
      <tr id="Row1" onclick="myFunction('Row1');">
        <td>Jane Doe</td>
        <td>Jane@Jane.com</td>
        <td>123</td>
        <td>US</td>
      </tr>
        <tr id="Row2" onclick="myFunction('Row2');">
        <td>John Doe</td>
        <td>John@John.com</td>
        <td>321</td>
        <td>US</td>
      </tr>
    </table>
    <form>
            <br><br>
            Name Field: 
            <input type="text" id="Name"> <br><br>
            Email Field:
            <input type="text" id="Email"><br><br>
            Phone Field:
            <input type="text" id="Phone"><br><br>
            Address Field:
            <input type="text" id="Address"><br><br>
        </form>
        <script>
            function myFunction(rowid) {
            if(rowid=="Row1")
            {
            $('#Row1').each(function() {
             document.getElementById("Name").value = $(this).find("td").eq(0).html();
                document.getElementById("Email").value =$(this).find("td").eq(1).html();;
                document.getElementById("Phone").value =$(this).find("td").eq(2).html();;
                document.getElementById("Address").value = $(this).find("td").eq(3).html();;
                });
            }
            else if(rowid=="Row2")
            {
            $('#Row2').each(function() {
             document.getElementById("Name").value = $(this).find("td").eq(0).html();
                document.getElementById("Email").value =$(this).find("td").eq(1).html();;
                document.getElementById("Phone").value =$(this).find("td").eq(2).html();;
                document.getElementById("Address").value = $(this).find("td").eq(3).html();;
                });
            }
               
            }
        </script>
    </body>

I think You can get some idea if you go through this Code given bellow.

I did few changes to your existing code.

Here it is hard coded. you can make it dynamic with minimum changes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download