jeditable是一个jquery插件，它的优点是可以就地编辑，并且提交到服务器处理，是一个不可多得的就地编辑插件。(注： 就地编辑，也有称即时编辑？一般的流程是这样的，当用户点击网页上的文字时，该文字就会出现在一个编辑框中，用户对文字进行修改完成后点击提交按钮，新的文本将发送到服务器上，然后表单消失，显示最新编辑的文本。),你可以通过这个演示页面来亲自体验下。
官网:
基本的使用方法如下：
首先编辑一个 html 文件，包含这么一段：
[span style="color: rgba(128, 0, 0, 1)">div class="edit" id="div_1"
[span style="color: rgba(128, 0, 0, 1)">div class="edit_area" id="div_2"
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
然后我们使用如下的 JS 代码来实现即时编辑（要先引入 Jeditable 插件）：
$(document).ready(function() {
$('.edit').editable('');
});
实现不同内容的编辑以及更多的定制项：
$(document).ready(function() {
$('.edit').editable('', {
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
$('.edit_area').editable('', {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '',
tooltip : 'Click to edit...'
});
上面的定制项包括按钮的文本，提示信息以及提交时的 loading 图片显示等等。
那么当用户点击了确定按钮时，发送到服务器上的是什么数据呢？
数据内容包含了编辑框的 ID 以及新的内容：id=elements_idvalue=user_edited_content
你也可以使用下面的方法来修改默认的参数名：
$(document).ready(function() {
$('.edit').editable('', {
id : 'elementid',
name : 'newvalue'
});
修改后传递的数据变成：elementid=elements_idnewvalue=user_edited_content
如果单行文本框不注意满足你的要求，可以使用 textarea 多行文本编辑框：
$(document).ready(function() {</p><p> $('.edit_area').editable('', {
loadurl : '',
type : 'textarea',
submit : 'OK'
});
});
另外 Jeditable 还支持下拉选择框哦：
$('.editable').editable('', { </p><p> data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",</p><p> type : 'select',</p><p> submit : 'OK'</p><p>});</p><p>或者你也可以从服务器获取下拉选择的数据内容：</p><p><?php</p><p> </p><p> $array【'E'】 = 'Letter E';
$array【'F'】 = 'Letter F'; </p><p> $array【'G'】 = 'Letter G';
$array【'selected'】 = 'F';</p><p> print json_encode($array);
?>
然后通过 loadurl 指定这个服务器输出数据的 URL 地址：
$('.editable').editable('', { </p><p> loadurl : '',</p><p> type : 'select',</p><p> submit : 'OK'</p><p>};</p><p>如果你希望给组件设定不同的样式，可以这样：</p><p>$('.editable').editable('', {
cssclass : 'someclass'
});
$('.editable').editable('', { </p><p> loadurl : '',</p><p> type : 'select',</p><p> submit : 'OK',</p><p> style : 'display: inline'</p><p>}); </p><p>或者：</p><p>$('.editable').editable('', {
loadurl : '',
type : 'select',
submit : 'OK',
style : 'inherit'
});
最后来点高级的内容，如果你希望使用一个 JS 函数而不是 URL 来处理提交，可以这样：
$('.editable').editable(function(value, settings) { </p><p> console.log(this);</p><p> console.log(value);</p><p> console.log(settings);</p><p> return(value);</p><p> }, { </p><p> type : 'textarea',</p><p> submit : 'OK',</p><p>});</p><p>处理回调： </p><p>$('.editable').editable('', {
type : 'textarea',
submit : 'OK',
callback : function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
}
});
使用附加参数：
$(".editable").editable("";, {</p><p> submitdata : {foo: "bar"};</p><p>});</p><p>直接从URL获取显示内容：</p><p>$(".editable").editable("";, {
loadurl : ""
});
英文原文：
打铁还需自身硬
