点击编辑按钮后，将表格中的数据加载到html表单中

Question

我有HTML表单来保存数据，并且在表单下方的表单表中也有数据库中的记录列表。

该表具有包含EDIT和DELETE操作的操作列。 当用户单击编辑选项时，相应的行数据必须复制到html表单。

我有jsfiddle部分来显示格式，请帮助编写jquery。

<form>
ID: <input type="text" name="sid" id="sid"> <br/>
NAME: <input type="text" name="fname" id="fname"> <br/>
<br/>
<input type="submit" value="SAVE"> 
</form>

<table>
<thead>
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>OPERATIONS</th>
  </tr>
</thead>
<tbody><tr><td>1001</td><td>XYZ</td>
<td><a href="#">EDIT</a></td></tr></tbody>
</table>

https://jsfiddle.net/rvp_cse/owhx6kv2/

Answer 1

给您的编辑链接和sid提供一些类，并命名td的

 $('table').on('click','.edit_link',function(e){ var row = $(this).closest('tr'); $('#sid').val(row.find('.sid_val').text()); $('#fname').val(row.find('.fname_val').text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <form> ID: <input type="text" name="sid" id="sid"> <br/> NAME: <input type="text" name="fname" id="fname"> <br/> <br/> <input type="submit" value="SAVE"> </form> <table> <thead> <tr> <th>ID</th> <th>NAME</th> <th>OPERATIONS</th> </tr> </thead> <tbody><tr><td class='sid_val'>1001</td><td class="fname_val">XYZ</td> <td><a class='edit_link' href="#">EDIT</a></td></tr></tbody> </table> 

Answer 2

尝试这个：

$(function(){
    $('#edit').click(function(){
        $('#sid').val($('table td:eq(0)').html());
    $('#fname').val($('table td:eq(1)').html());
  });
});

更新的小提琴

注意：别忘了包含jquery库

Answer 3

添加jQuery，然后

$(".edit").click(function(e) {      
        var sid = $(this).closest('tr').find(".sid").text();
    var fname = $(this).closest('tr').find(".fname").text();    
    $("#sid").val(sid);
    $("#fname").val(fname);
})

<form>
ID: <input type="text" name="sid" id="sid"> <br/>
NAME: <input type="text" name="fname" id="fname"> <br/>
<br/>
<input type="submit" value="SAVE"> 
</form>

<table>
<thead>
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>OPERATIONS</th>
  </tr>
</thead>
<tbody><tr><td class="sid">1001</td><td class ="fname">XYZ</td>
<td><a class="edit" href="#">EDIT</a></td></tr></tbody>
</table>