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.

http://stackoverflow.com/questions/4323830/how-can-i-make-the-full-row-editable-with-jeditable-plugin — rkw, Aug 26 '11 at 00:53
I tried using that code but wasn't able to get it working. I'm not sure what he means by var jeditableEvent = $.fn.editable.defaults.event; I'm trying to use jQuery — leonel, Aug 26 '11 at 13:32
I tried this also, but makes the whole table row editable, including the tr and td tags. `code` $(document).ready(function() { $(".editlink").click(function() { $("table tr").editable('http://localhost',{}); }); }); `code` — leonel, Aug 26 '11 at 13:33
I never worked with jEditable, but try changing $('table tr') to $('table tr td') — rkw, Aug 26 '11 at 16:59

score 5 · Accepted Answer · edited Feb 11 '13 at 19:13

5

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/

edited Feb 11 '13 at 19:13

Cameron

86
1
2
16

answered Aug 26 '11 at 15:48

William Niu

15,798
7
53
93

@JimG. thanks for your negative vote, making this group of answers look rather amusing! :D On the serious side, could you please come up with at least some suggestion while you downvoted an answer? – William Niu Dec 06 '12 at 01:58

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

I found the right path here: jQuery - Edit a table row inline

It doesn't use jEditable.

It's just a Javascript function, but I think it's launch pad for creativity.

edited May 23 '17 at 12:07

Community

1
1

answered Aug 26 '11 at 14:27

leonel

10,106
21
85
129

score 0 · Answer 3 · answered Jul 24 '12 at 09:50

0

Here is an easy to use and flexible jquery inline editable plugin. It let's you to have editable easily anywhere, inside a table or h1 tag, and can covnert anything to anything. actually the idea behind is simple and kinda unique.

Cheers,

answered Jul 24 '12 at 09:50

James

79
3

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

3 Answers3