title: How to update fields respective to the data in table rows for a webpage?
body: <p>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.</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;style&gt;
      table, th, td {
          border: 1px solid black;
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;table style="width:100%"&gt;
        &lt;tr &gt;
          &lt;th id="name"&gt;Name&lt;/th&gt;
          &lt;th id="email"&gt;Email&lt;/th&gt;
          &lt;th id="phone"&gt;Phone&lt;/th&gt;
          &lt;th id="addr"&gt;Address&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr id="Row1" onclick="myFunction();"&gt;
          &lt;td&gt;Jane Doe&lt;/td&gt;
          &lt;td&gt;Jane@Jane.com&lt;/td&gt;
          &lt;td&gt;123&lt;/td&gt;
          &lt;td&gt;US&lt;/td&gt;
        &lt;/tr&gt;
          &lt;tr id="Row2" onclick="myFunction();"&gt;
          &lt;td&gt;John Doe&lt;/td&gt;
          &lt;td&gt;John@John.com&lt;/td&gt;
          &lt;td&gt;321&lt;/td&gt;
          &lt;td&gt;US&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;form&gt;
              &lt;br&gt;&lt;br&gt;
              Name Field: 
              &lt;input type="text" id="Name"&gt; &lt;br&gt;&lt;br&gt;
              Email Field:
              &lt;input type="text" id="Email"&gt;&lt;br&gt;&lt;br&gt;
              Phone Field:
              &lt;input type="text" id="Phone"&gt;&lt;br&gt;&lt;br&gt;
              Address Field:
              &lt;input type="text" id="Address"&gt;&lt;br&gt;&lt;br&gt;
          &lt;/form&gt;
          &lt;script&gt;
              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!";
              }
          &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>