使用jQuery，jEditable，jeditable-rails gem或任何AJAXy解决方案使表行可编辑

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.

我可以通过使用jQuery和jEditable来实现这一点;并且还使用了jeditable-rails gem。但我一次只能编辑一个单元格。

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.

我需要的是:如果我单击编辑按钮或行本身。表格中的所有这四个单元格都应该可以编辑。

3 个解决方案

#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/

#2

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

我在这里找到了正确的路径:jQuery - 内联编辑表行

It doesn't use jEditable.

它不使用jEditable。

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

它只是一个Javascript函数,但我认为它是创造力的发射台。

#3

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.

这是一个易于使用和灵活的jquery内联可编辑插件。它让你可以在任何地方,桌面或h1标签内轻松编辑,并且可以将任何内容整合到任何东西中。实际上,背后的想法很简单,有点独特。

Cheers,

#1