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.

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.

Answer 2

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.

Answer 3

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