Make table row editable using jQuery, jEditable, jeditable-rails gem or any AJAXy solution

Question

I have a table with rows of data on it. I want most of the row to be editable by clicking either the row itself or an edit button.

Let's say I have a table that lists products:

• Product Name
• Brand
• Model
• Price

I'm able to accomplish this by using jQuery and jEditable; and also by using the jeditable-rails gem. But I can only edit one cell at a time.

What I need is this: If I click in the Edit button or the row itself. All those four cells in the table should become editable.

Answer 1

Try something like this:

$('td:not(.edit)').editable('', {
    onblur: 'ignore',
    submit: 'ok',
    cancel: 'cancel',
    width: 75,
    event: 'edit'
});

$('td').click(function(e) {
    // reset all editables
    var allEditables = $(this).closest('table').find('td:not(.edit)').get();
    $.each(allEditables, function(i, elm) {
        elm.reset();
    });

    // make all cells in this row editable
    $(this).parent().children(':not(.edit)').trigger('edit');
});

Example: http://jsfiddle.net/UMccc/221/