关于jQuery的可编辑表与输入和选择

时间:2016-01-23 13:26:08

标签: javascript jquery html

我正在尝试在jQuery上做可编辑的表。我现在用输入内部和按钮操作单击我打开输入和用户将数据放在那里,但问题是我不能使用tableorter插件对此表进行排序,所以我认为我必须创建输入点击编辑按钮,然后转换td的输入中的数据,但如何选择?

我需要这样的东西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());
});

但是只有当我点击按钮时才能使它可编辑?还有如何选择?

2 个答案:

答案 0 :(得分:1)

我找到了这个插件http://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/ 也许对某人来说会有所帮助!

答案 1 :(得分:0)

帮自己一个忙,并使用像 - &gt;这样的现成框架http://demos.telerik.com/kendo-ui/grid/index。投入时间寻找合适的工具,而不是创建自己的工作,甚至更糟糕的隐藏错误