How to edit a dynamically created row's using jquery

Question

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>

Where is edit code for already existing rows? You must be having some javascript or jquery events/functions.. — Guruprasad J Rao
– Guruprasad J Rao, Commented May 25, 2016 at 12:05
i actully dont have anyy idea...how to edit the row...thats why i did not write any code... — Muhammad Hashir Anwaar
– Muhammad Hashir Anwaar, Commented May 25, 2016 at 12:09

Moiz Ahmad · Accepted Answer · 2016-05-25 12:07:04Z

1

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

answered May 25, 2016 at 12:07

Moiz Ahmad

14410 bronze badges

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

3 Comments

Moiz Ahmad Over a year ago

i am not good in artificial inteligence ... just do jquery and other coding as my intrest..

Muhammad Hashir Anwaar Over a year ago

@HashirAnwaar ...your answer work... just tell me... waht is " .editrow " ??? +1

Moiz Ahmad Over a year ago

dear @MoizAhmad " .editrow " is class given to the button of edit .

Collectives™ on Stack Overflow

How to edit a dynamically created row's using jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related