點擊編輯按鈕后，將表格中的數據加載到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>