Javascript jQuery数据表行内联编辑

看看这个例子

它允许您在单击单元格时编辑文本。如果单击单元格，它将呈现为

input

标记

就我的情况而言，我希望有点不同。每行都有一个编辑按钮，用户单击编辑按钮，然后所有输入标记都将显示在该行上

---

我在

数据表上找不到任何演示或如何执行此操作，您能给我一些建议吗？
当单击“td渲染为输入代码”时，如下所示：

$td.click(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html('<input type="text" value="'+ OriginalContent + '"  style="width: 100%"/>');
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

        $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });

$td.单击（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this.children（）.first（）.blur（function（））{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});

单击编辑按钮，则该行上将显示所有输入标记：

1.内存中的行数据

2.单击按钮时，查找此行的td配置（要呈现的UI：输入、选择、单选…）

3.切换UI和行数据，如angularjs双向数据绑定

花一小时进行此演示：



演示
功能网格（）{
this.config={
id:“新网格”，
数据：[
{姓名：“警惕”，年龄：“18”}，
{姓名：“琼斯”，年龄：“28”}
]
};
this.rows=[]；
}
Grid.prototype.render=函数（）{
var html=''+
'' +
“姓名”+
“年龄”+
'' +
'' +
'';
var$table=$（html）；
对于（var i=0，item；item=this.config.data[i++]；）{
var newRow=新行（）；
this.rows.push（newRow）；
var rowDom=newRow.render（项目）；
$table.append（rowDom）；
}
$（“#”+this.config.id）.append（$table）；
};
函数行（）{
this.cells={}；
}
Row.prototype.render=函数（行）{
var_this=这个；
var nameCell=新单元格（row.name）；
var ageCell=新单元格（行年龄）；
此参数为。单元格={
姓名：nameCell，
年龄：ageCell
};
var$editBtn=$（“编辑”）。单击（函数（）{
_this.editRow（）；
});
var$saveBtn=$（“保存”）。单击（函数（）{
_这是saveRow（）；
});
返回$（“”）
.append（$（“”）.append（nameCell.$Dom））
.append（$（“”）.append（ageCell.$Dom））
.append（$（“”）。append（$editbn）。append（$saveBtn））；
};
Row.prototype.editRow=函数（）{
for（此.cells中的var键）{
this.cells[key].editorCell（）；
}
};
Row.prototype.saveRow=函数（）{
变量数据={}；
for（此.cells中的var键）{
//console.log（key+“=”+this.cells[key].editor.getValue（））；
data[key]=this.cells[key].editor.getValue（）
}
警报（JSON.stringify（数据））
};
功能单元（值）{
这个。$Dom=$（“”）；
this.editor=null；
这个。呈现（价值）；
}
Cell.prototype.render=函数（值）{
this.editor=新表单[“Span”]（值）；
返回此.Dom.append（此.editor.Dom）；
};
Cell.prototype.editorCell=函数（）{
this.editor=新表单[“输入”]（this.editor.getValue（））；
this.$Dom.html（this.editor.$Dom）
};
var形式={}；
//跨对象
Forms.Span=函数（值）{
这个.$Dom=$（''+value+''）；
};
Forms.Span.prototype.setValue=函数（值）{
该值为.Dom.text（值）；
};
Forms.Span.prototype.getValue=函数（）{
返回此值。$Dom.text（）；
};
//输入对象
Forms.Input=函数（值）{
这个.$Dom=$（''）；
这个.setValue（值）；
};
Forms.Input.prototype.setValue=函数（值）{
这是.$Dom.val（值）；
};
Forms.Input.prototype.getValue=函数（）{
返回此值。$Dom.val（）；
};
//初始网格
$（文档）.ready（函数（）{
新网格（）.render（）；
})
单击“渲染到输入代码”时，如下所示：

$td.click(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html('<input type="text" value="'+ OriginalContent + '"  style="width: 100%"/>');
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var newContent = $(this).val();
                $(this).parent().text(newContent);
                $(this).parent().removeClass("cellEditing");
            }
        });

        $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
        });
    });

$td.单击（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（e.which==13）{
var newContent=$（this.val（）；
$（this）.parent（）.text（newContent）；
$（this.parent（）.removeClass（“cellEditing”）；
}
});
$（this.children（）.first（）.blur（function（））{
$（this.parent（）.text（原始内容）；
$（this.parent（）.removeClass（“cellEditing”）；
});
});

单击编辑按钮，则该行上将显示所有输入标记：

1.内存中的行数据

2.单击按钮时，查找此行的td配置（要呈现的UI：输入、选择、单选…）

3.切换UI和行数据，如angularjs双向数据绑定

花一小时进行此演示：



演示
功能网格（）{
this.config={
id:“新网格”，
数据