jQuery - Edit a table row inline

Question

I have a table with arbitrary columns and rows. This fact is irrelevant though really, all I want to do is develop a function that will turn a row (or multiple rows) into a series of text inputs containing the data in the table (or empty if no data in cell).

I can't find any examples of people explicitly doing this, so I wondered what people here think is the best way to find a solution.

Dehnel

Answer 1

Iterate over the table cells in the rows, and replace the contents with text inputs:

function editRow(row) {
    $('td',row).each(function() {
         $(this).html('<input type="text" value="' + $(this).html() + '" />');
    });
}

You need to pass the relevant row/rows into the function obviously.

Kenyakenyatta

What happens if cell content has html entities? – Thrust

I answered it in the simplistic way you described it. I usually use a hidden input with the data in raw form, and load up the text input with that. – Kenyakenyatta

@EranGalperin Would you happen to know how one could save the text after implementing your example? I notice that the value of the input still stays at it's original even after typing. – Mashhad

Answer 2

use http://code.google.com/p/jquery-inline-editor/, it does exactly what you need

Inflight

Answer 3

like Eran says.

however, you could also look at properties such as contenteditable and designMode although i'm not sure how well supported these are.

once you have replaced the contents with text inputs, you could use the jquery plugin toggleEdit to manage switching them between preview mode and edit mode.

Jacobson