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 window with a large text area (or ideally an HTML editor).

The changes need only be superficial as i am using another jQuery plugin to scrape the table contents and export it to something else.

Difficulty, none of the cells can have unique names or id's.

Answer 1

You may want to check the jqGrid plugin.

Answer 2

$("td").click(function(event){
    var myText = '';
    $("myOverlayThing").show();
    $("myOverlayThingCloseLink").click(function(event){
        event.preventDefault();
        myText = $("myOverlayThing.textarea").val();
    });
    $(this).html(myText);
});

Probably a little more complicated than that, but that's the basic idea without seeing your HTML.

Answer 3

jEditable plugin can help you edit your table in place.

$(document).ready(function() {
    $('td').editable('http://www.example.com/save.php');
});

Answer 4

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.