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());
  });
});

Updated fiddle

注意：不要忘记包含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>

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

3 个答案: