14

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
adam
  • 22,404
  • 20
  • 87
  • 119

3 Answers3

31

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.

Eran Galperin
  • 86,251
  • 24
  • 115
  • 132
  • What happens if cell content has html entities? – Héctor Vergara Jan 21 '09 at 03:21
  • 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. – Eran Galperin Jan 21 '09 at 07:41
  • @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. – Matt May 24 '13 at 05:19
1

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

Matt Kim
  • 759
  • 7
  • 19
0

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.

alzclarke
  • 1,725
  • 2
  • 17
  • 20