如何更新网页表格行中数据的字段？

我正在尝试更新相应的行，我点击，所以如果我点击第二行，我想在底部的字段分别改变，所以名字去第一个字段，电子邮件到第二等。那么如果我点击第一行，那么第一行的数据应该显示在这些字段中。如何更新网页表格行中数据的字段？

<!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>[email protected]</td> 
     <td>123</td> 
     <td>US</td> 
     </tr> 
     <tr id="Row2" onclick="myFunction();"> 
     <td>John Doe</td> 
     <td>[email protected]</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>

来源

2017-06-12 Learner

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>[email protected]</td> 
 
     <td>123</td> 
 
     <td>US</td> 
 
     </tr> 
 
     <tr id="Row2" onclick="myFunction('Row2');"> 
 
     <td>John Doe</td> 
 
     <td>[email protected]</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>

我想，如果你去通过这个代码给出波纹管你可以得到一些想法。

我对现有代码做了一些更改。

这里是硬编码的。你可以使其动态变化最小。

来源

2017-06-12 06:04:32 HEGDE

如何更新网页表格行中数据的字段？

回答

相关问题