Change table cell from text to input value with 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 <td> 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>');
})

My table looks like this...

ID	Name	Position	Marks	Edit
1	Ahmad	6th	525	Edit Button

After pressing the Edit button, the output is like this...

ID	Name	Position	Marks	Edit
1Ahmad6th525	1Ahmad6th525	1Ahmad6th525	1Ahmad6th525	Update Button

Alexios Tsiaparas · Accepted Answer · 2017-06-08 16:02:21Z

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

edited Jun 8, 2017 at 16:02

answered Jun 7, 2017 at 19:12

Alexios Tsiaparas

92010 silver badges20 bronze badges

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

1 Comment

rakibulmuhajir Over a year ago

You have missing closing tags for the click function. Thanks for the help

Collectives™ on Stack Overflow

Change table cell from text to input value with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related