我的思路是这样的：
1.对任何一个 table, tr 都可以添加编辑、删除功能——功能独立
2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态
3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以
4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能
下面是我实现的功能代码：
editable.js
[url=#]$trs.each(function (i, tr) {
if (opt.head && i == 0) {
$(tr).append("<td></td>");
return true;
}
$(tr).append(button);
});
$trs.find(".onok, .cancl").hide();
$trs.find(".edit").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
$.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
if ($.inArray(i, opt.noeditcol) != -1)
return true;
var t = $.trim($(td).text());
if (opt.editcol != undefined) {
$.each(opt.editcol, function (j, obj) {
if (obj.colindex == i) {
css = obj.css ? "class='" + obj.css + "'" : "";
if (obj.edittype == undefined || obj.edittype == 0) {
$(td).data("v", t);
$(td).html("<input type='text' value='" + t + "' " + css + " />");
}
else if (obj.edittype == 2) { //select
if (obj.ctrid == undefined) {
alert('请指定select元素id ctrid');
return;
}
$(td).empty().append($("#" + obj.ctrid).clone().show());
$(td).find("option").filter(":contains('" + t + "')").attr("selected", true);
}
/* 可以在此处扩展input、select以外的元素编辑行为 */
}
});
}
else {
$(td).data("v", t);
$(td).html("<input type='text' value='" + t + "' />");
}
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
return false;
}); ;
$trs.find(".del").click(function () {
$tr = $(this).closest("tr");
if (opt.ondel()) {
$tr.remove();
}
return false;
});
$trs.find(".onok").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
if (opt.onok()) {
$.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
var c = $(td).children().get(0);
if (c != null)
if (c.tagName.toLowerCase() == "select") {
$(td).html(c.options[c.selectedIndex].text);
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* 可以在此处扩展input、select以外的元素确认行为 */
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
}
return false;
});
$trs.find(".cancl").click(function () {
$tr = $(this).closest("tr");
$tds = $tr.find("td");
$.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
var c = $(td).children().get(0);
if (c != null)
if (c.tagName.toLowerCase() == "select") {
$(td).html(c.options[c.selectedIndex].text);
}
else if (c.tagName.toLowerCase() == "input") {
$(td).html(c.value);
}
/* 可以在此处扩展input、select以外的元素取消行为 */
});
$tr.find(".onok, .cancl, .edit, .del").toggle();
return false;
});
};
$.fn.editable.defaults = {
head: false,
/*
如果为空那么所有的列都可以编辑，并且默认为文本框的方式编辑
如下形式：
{{colindex:'', edittype:'', ctrid:'', css:''}, ...}
edittype 0:input 1:checkbox 2:select
*/
//editcol:{},
/*
设置不可以编辑的列，默认为空
如下形式：
[0,2,3,...]
*/
noeditcol: [],
onok: function () {
alert("this's default onok click event");
return true;
},
ondel: function () {
alert("this's default on del click event");
return true;
},
editcss: "edit",
delcss: "del",
onokcss: "onok",
canclcss: "cancl"
};
})(jQuery);
[b]下面来看下插件的效果[/b]
[b] 1.数据表格[/b]
[img]http://files.jb51.net/upload/201110/20111024153343815.jpg[/img]
[b]2.添加编辑功能
[/b]
$(function () {
$("table").editable({
head: true, //有表头
noeditcol: [0], //第一列不可编辑
editcol: [{ colindex: 1 }, { colindex: 2, edittype: 2, ctrid: "sel"}], //配置表格的编辑列 ctrid:为关联的dom元素id
onok: function () {
return false; //返回false表示失败，dom元素不会有变化
},
ondel: function () {
return true; //返回false表示成功，dom元素相应有变化
}
});
});
[b]3.添加编辑后的效果[/b]
[img]http://files.jb51.net/upload/201110/20111024153343401.jpg[/img]
注：另外可以配置编辑功能中的几个按钮样式，详见代码咯 ；)
文件源码：[url=http://xiazai.jb51.net/201011/yuanma/editable.rar]editable.rar[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
