CODEWITHSUNDEEP
javascriptphpjquery
Muhammad Hashir Anwaar
Muhammad Hashir Anwaar

Reputation: 614

How to edit a dynamically created row's using jquery

I have dynamically created a row in table using jQuery by appending the form data. Now I want to add a function to edit on button click:
When user click on edit button, it should remove the row from table and assign the values again to its relevant fields in the form.

Code:

<form id="form1" >
      <input  type="text" id="input1"  />
      <input  type="text" id="input2"  />
      <input  type="text" id="input3"  />
      <input  type="text" id="input4"  />
      <input  type="submit" id="submit-btn" value="submit"  />
</form>

Upvotes: 0

Views: 745

Answers (1)

Moiz Ahmad
Moiz Ahmad

Reputation: 144

Just try the following code... add classes to your append function in each of Td attribute...

$(document).ready(function(){

$('#mytable').on('click','.editrow',function(){

    var item1 = $(this).closest('tr').find('.td1').text();
    var item2 = $(this).closest('tr').find('.td2').text();
    var item3 = $(this).closest('tr').find('.td3').text();
    var item4 = $(this).closest('tr').find('.td4').text();
    $('#input1').val(item);
    $('#input2').val(item2);
    $('#input3').val(item3);
    $('#input4').val(item4);
    $(this).closest('tr').remove();
});  });

Upvotes: 1

Related Questions