How to update data into each row when click on button using Jquery?

Question

I want to update row data when user click on button but it updates all row of the table.

It updates all previous row when user click on another row's editbutton.

Each edit button with row is keeping the same class.

Sample Code

    <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>

Working Example jsfiddle

I want update a row which is clicked, not all previous clicked rows

i don't understand what is your problem, you already have working example !! — Mohamed Badr
– Mohamed Badr, Commented May 26, 2015 at 6:22
if user second time click on new edit button it update previous row with same data. How can we avoid it? and see updated question — Mukesh
– Mukesh, Commented May 26, 2015 at 6:29

Mackan · Accepted Answer · 2015-05-26 06:33:05Z

1

You're rebinding the click event on #save_edit_info each time an edit button is clicked. If you unbind this event when it has completed, it works fine.

Like this:

  $('#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

answered May 26, 2015 at 6:33

Mackan

6,2712 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mahedi Sabuj · Accepted Answer · 2015-05-26 06:43:48Z

1

I really don't understand why you initialize $('#save_edit_info').click(function() in every edit button click. Initialize two click function separately.

Script

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

});

Take a look at the fiddle: http://jsfiddle.net/39k3hzuc/

edited May 26, 2015 at 6:43

answered May 26, 2015 at 6:37

Mahedi Sabuj

2,9543 gold badges18 silver badges30 bronze badges

1 Comment

Mukesh Over a year ago

Thanks . sometimes do not see small mistakes ,I did mistake to initialize each time when user click edit button.thanks again for correction.

ricks · Accepted Answer · 2018-05-30 15:00:31Z

0

In case someone runs into my same issue

Get the index of the row clicked by finding the closest <tr>

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

Then when you have the index you can call the updateRow function

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

This is the cleanest way to update a row

Update the specified row(s), each param contains following properties: index: the row index to be updated. row: the new row data.

Documentation

answered May 30, 2018 at 15:00

ricks

3,34438 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to update data into each row when click on button using Jquery?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related