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

Question

我有一张表格，上面有几行数据。我希望通过单击行本身或编辑按钮来编辑该行的大部分内容。

假设我有一张列出产品的表格:

• 产品名称
• 品牌
• 模型
• 价格

我可以通过使用 jQuery 和 jEditable 来完成这个；以及使用 jeditable-rails gem。但我一次只能编辑一个单元格。

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

Answer 1

尝试这样的事情:

$('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');
});

示例:http://jsfiddle.net/UMccc/221/