使用jQuery将表单元格文本更改为输入值

Question

I have a table in CRUD loaded from database, i want table rows to be editable by converting table cell to input field preserving cell text as input value. I am using jQuery for that. So far i can add input field inside tag. But data from all the cells becomes value of each input instead of becoming value of their respective input fields. Here is my code

$("#parEdit").click(function(){
$(this).text("Update");
$(this).closest('tr').children().wrapInner('<input type="text" value = ' + $('td').text() + '></input>');
    })

table ID| Name | Position | Marks| Edit|

1 | Ahmad | 6th | 525 | Edit Button|

After pressing Edit Button The output is like this

ID| Name | Position | Marks| Edit|

1Ahmad6th525 | 1Ahmad6th525 | 1Ahmad6th525 | 1Ahmad6th525 | Update Button |

Answer 1

You need apply the wrap to each td, your original code inserted every td text.

$("#parEdit").click(function(){
   $(this).text("Update");
   $(this).closest('tr').children().each(function(){
      $(this).wrapInner('<input type="text" value = ' + $(this).text() + '></input>');
   });
});