Using jQuery to edit individual table cells

Question

How can I use jQuery to click on a table cell and edit its contents. There is a particular column which contains several paragraphs of data, so if possible, have a pop up wi

Answer 1

Making content editable can be achieved with plugins like the jQuery Editable one. How easy this would be to translate onto a table with no ids though, I'm not sure.

To traverse your table (and I'm assuming your table either has an ID of its own or is the only table on the page) would be reasonably straight-forward if you were able to get that plugin working:

$('#myTable td').editable();

But that doesn't give you the rich text editor you're after. The other approach would be to forget that plugin and try using the jQuery UI dialog.

$('#myTable td').click(function(){
  $('myDialog').dialog('open');
});

Assuming you put a rich-text editor in that dialog, you could use $.ajax() to post the result to some service at the server end.

Finally, the jqGrid might be a good option for you, depending on the data that you want in your table.