帶有輸入和選擇的jQuery上的可編輯表

Question

我正在嘗試在jQuery上做可編輯表。 我現在用內部輸入和單擊操作來完成輸入，我正在打開輸入並將用戶放在那里的數據，但是問題是我無法使用tablesorter插件使該表可排序，所以我認為我必須創建輸入在單擊“編輯”按鈕上，然后從td的輸入中轉換數據，但是如何使用selects呢？

我需要這樣的東西http://jsfiddle.net/y3tmrns9/1/

$(".edit").on("click", "td:not(.active)", function () {    
    $("label").html("td click<br />" + $("label").html());
    var $this = $(this);
    var $textbox = $("<input>", { type: "text", size: 5, value: $this.addClass("active").text() });
    $this.html($textbox);
    $textbox.focus();    
});

$("table").on("blur", "input:text", function () {        
    $("label").html("input blur<br />" + $("label").html());
    var $this = $(this);
    $this.parent().removeClass("active").text($this.val());
});

但是，只有當我單擊按鈕時，如何使它可編輯？ 還有如何放置選擇？

Answer 1

我發現這個插件http://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/也許對某人有幫助！

Answer 2

幫自己一個忙，並使用現成的框架，例如-> http://demos.telerik.com/kendo-ui/grid/index 。 花時間在尋找合適的工具上，而不是創建自己的不起作用甚至因隱藏的錯誤而變得更糟