CODEWITHSUNDEEP
javascriptjqueryhtml-tablerowsinline-editing
adam
adam

Reputation: 22587

jQuery - Edit a table row inline

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.

Upvotes: 14

Views: 52700

Answers (3)

Matt Kim
Matt Kim

Reputation: 747

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

Upvotes: 1

alzclarke
alzclarke

Reputation: 1765

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.

Upvotes: 0

Eran Galperin
Eran Galperin

Reputation: 86805

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.

Upvotes: 31

Related Questions