使用jQuery，jEditable，jeditable-rails gem或任何AJAXy解決方案使表格行可編輯

我有一張包含數據行的表格。我希望通過單擊行本身或編輯按鈕可以編輯大部分行。使用jQuery，jEditable，jeditable-rails gem或任何AJAXy解決方案使表格行可編輯

比方說，我有一個列出的產品表：

產品名稱
品牌
型號
價格

我能夠通過使用jQuery來做到這一點和jEditable;也可以通過使用jeditable-rails寶石。但我一次只能編輯一個單元格。

我需要的是：如果我點擊編輯按鈕或行本身。表格中的所有四個單元格都應該可以編輯。

來源

2011-08-25 leonel

http://stackoverflow.com/questions/4323830/how-can-i-make-the-full-row-editable-with-jeditable-plugin – rkw

我試圖用代碼，但WASN無法讓它工作。我不知道他的意思是什麼var jeditableEvent = $ .fn.editable.defaults.event; 我試圖使用jQuery – leonel

我也試過這個，但使整個表格行可編輯，包括tr和td標籤。（'。editlink「）。click（function（）{（」table tr「）.editable（'http：// localhost'）。，{}）; }）; }）; 'code' – leonel

嘗試這樣：

$('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/

來源

2011-08-26 15:48:59

-1：此JSFiddle在Google Chrome中不起作用。 –

@JimG。感謝您的反對票，讓這組答案看起來相當有趣！：D在嚴重的一面，當你提出一個答案時，你能否提出至少一些建議？ –

我找到了正確的道路在這裏：jQuery - Edit a table row inline

它不使用jEditable。

這只是一個Javascript功能，但我認爲它是創造力的發射臺。

來源

2011-08-26 14:27:41 leonel

下面是一個易於使用和靈活jquery inline editable plugin。它讓你可以輕鬆地編輯任何地方，在表格或h1標籤內，並且可以將任何東西都包含在內。其實背後的想法很簡單，有點獨特。

乾杯，

來源

2012-07-24 09:50:21 James

使用jQuery，jEditable，jeditable-rails gem或任何AJAXy解決方案使表格行可編輯

回答

相關問題