Question

我想在用户点击按钮时更新行数据，但它会更新表格的所有行。

当用户点击另一行的编辑按钮时，它会更新所有上一行。

每个编辑按钮与行保持相同的类。

示例代码

    <table id="tablebody" class="table">
<tbody>
<tr>
<th>name</th>
<th class=""> Code</th>
</tr>
<tr>
<td>
<div class="form-control a medical_his" data-pk="medical_1" data-type="text">fffde</div>
</td>
<td>
<div class="form-control a hcode" data-pk="hcc_1" data-type="text">101</div>
</td>
<td style="border:none;">
<button class="editbtn btn btn-primary">Edit</button>
</td> 
</tr>
<tr>
<td>
<div class="form-control a medical_his" data-pk="medical_2" data-type="text">fffdefds</div>
</td>
<td>
<div class="form-control a hcode" data-pk="hcc_2" data-type="text">fffdfasdddd</div>
</td>
<td style="border:none;">
<button class="editbtn btn btn-primary">Edit</button>
</td>

</tr>

</tbody>
</table>

工作示例 jsfiddle

我想更新一个被点击的行，而不是所有先前点击的行

Answer 1

每次点击编辑按钮时，您都会重新点击#save_edit_info上的点击事件。如果您在完成此事件后取消绑定，则可以正常工作。

像这样：

  $('#save_edit_info').click(function(){
      var medical_data1=$('#name').val();
      var hcc_data1 =$('#code').val();
      if(medical_data1 && hcc_data1)
      {
        $("#myModal").modal('hide');             
        row_h.html(hcc_data1);            
        row_m.html(medical_data1);            
      } else {
        alert("fields required");
      }
      $(this).off('click');
  });

Updated fiddle

Answer 2

我真的不明白为什么在每个编辑按钮点击中初始化$('#save_edit_info').click(function()。分别初始化两个单击功能。

<强>脚本

var row_h = '';
var row_m = '';

$(document).ready(function(){ 
  $('.editbtn').click(function(){ 
      $("#myModal").modal('show');  
      var row_medical_col=$(this).closest("tr");
      var row_medical_col_data=row_medical_col.find(".medical_his").text();
      var row_hcode_col_data=row_medical_col.find(".hcode").text();
      $('#name').val(row_medical_col_data);
      $('#code').val(row_hcode_col_data);
      row_h=$(this).closest("tr").find('.hcode');
      row_m=$(this).closest("tr").find('.medical_his');
   });

  $('#save_edit_info').click(function(){
      var medical_data1=$('#name').val();
      var hcc_data1 =$('#code').val();
      if(medical_data1 && hcc_data1)
      {
        $("#myModal").modal('hide');

        row_h.html(hcc_data1);

        row_m.html(medical_data1);
      }
      else
      {
          alert("fields required");
      }
  });

});

看看小提琴：http://jsfiddle.net/39k3hzuc/

Answer 3

如果有人遇到同样的问题

通过找到最接近的<tr>

获取点击行的索引

var index = $(element).closest('tr').attr('data-index');

然后当你有索引时，可以调用updateRow函数

$('#tableId').bootstrapTable('updateRow', {
    index: index,
    row: {
        id: id,
        name: name,
    }
});

这是更新行的最简洁方法

更新指定的行，每个param包含以下属性： index：要更新的行索引。 row：新行数据。

Documentation

使用Jquery单击按钮时如何将数据更新到每一行？

3 个答案: