经常写程序总会对数据进行编辑、删除功能，虽然不难，代码不多，你是如何重用这个功能的呢？
我的思路是这样的：
1.对任何一个 table, tr 都可以添加编辑、删除功能——功能独立
2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态
3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以
4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能
下面是我实现的功能代码：
editable.js 代码
1 /
2 code: editable.js
3 version: v1.0
4 date: 2011/10/21
5 author: lyroge@foxmail.com
6 usage:
7 $("table").editable({ selector 可以选择table或者tr
8 head: true, 是否有标题
9 noeditcol: 【1, 0】, 哪些列不能编辑
10
11 编辑列配置：colindex：列索引
12 edittype：编辑时显示的元素 0：input 1：checkbox 2：select
13 ctrid：关联元素的id 如edittype=2， 那么需要设置select的元素
14 css:元素的样式
15 editcol: 【{ colindex: 2, edittype: 2, ctrid: //代码效果参考：http://www.zidongmutanji.com/zsjx/215777.html
"sel",css:""}】,16 onok: function () {
17 return true; 根据结果返回true or false
18 },
19 ondel: function () {
20 return true; 根据结果返回true or false
21 }
22 });
23 /
24
25 (function ($) {
26 $.fn.editable = function (options) {
27 options = options || {};
28 opt = $.extend({}, $.fn.editable.defaults, options);
29
30 trs = 【】;
31 $.each(this, function () {
32 if (this.tagName.toString().toLowerCase() == "table") {
33 $(this).find("tr").each(function () {
34 trs.push(this);
35 });
36 }
37 else if (this.tagName.toString().toLowerCase() == "tr") {
38 trs.push(this);
39 }
//代码效果参考：http://www.zidongmutanji.com/bxxx/375488.html
40 });41
42 $trs = $(trs);
43 if ($trs.size() == 0 || (opt.head $trs.size() == 1))
44 return false;
45
46 var button = "编辑 删除确定 取消";
47
48 $trs.each(function (i, tr) {
49 if (opt.head i == 0) {
50 $(tr).append("");
51 return true;
52 }
53 $(tr).append(button);
54 });
55
56 $trs.find(".onok, .cancl").hide();
57 $trs.find(".edit").click(function () {
58 $tr = $(this).closest("tr");
59 $tds = $tr.find("td");
60 $.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
61 if ($.inArray(i, opt.noeditcol) != -1)
62 return true;
63 var t = $.trim($(td).text());
64 if (opt.editcol != undefined) {
65 $.each(opt.editcol, function (j, obj) {
66 if (obj.colindex == i) {
67 css = obj.css ? "class='" + obj.css + "'" : "";
68 if (obj.edittype == undefined || obj.edittype == 0) {
69 $(td).data("v", t);
70 $(td).html("");
71 }
72 else if (obj.edittype == 2) { //select
73 if (obj.ctrid == undefined) {
74 alert('请指定select元素id ctrid');
75 return;
76 }
77 $(td).empty().append($("#" + obj.ctrid).clone().show());
78 $(td).find("option").filter(":contains('" + t + "')").attr("selected", true);
79 }
80 / 可以在此处扩展input、select以外的元素编辑行为 /
81 }
82 });
83 }
84 else {
85 $(td).data("v", t);
86 $(td).html("");
87 }
88 });
89 $tr.find(".onok, .cancl, .edit, .del").toggle();
90 return false;
91 }); ;
92
93 $trs.find(".del").click(function () {
94 $tr = $(this).closest("tr");
95 if (opt.ondel()) {
96 $tr.remove();
97 }
98 return false;
99 });
100
101 $trs.find(".onok").click(function () {
102 $tr = $(this).closest("tr");
103 $tds = $tr.find("td");
104 if (opt.onok()) {
105 $.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
106 var c = $(td).children().get(0);
107 if (c != null)
108 if (c.tagName.toLowerCase() == "select") {
109 $(td).html(c.options【c.selectedIndex】.text);
110 }
111 else if (c.tagName.toLowerCase() == "input") {
112 $(td).html(c.value);
113 }
114 / 可以在此处扩展input、select以外的元素确认行为 /
115 });
116 $tr.find(".onok, .cancl, .edit, .del").toggle();
117 }
118 return false;
119 });
120
121 $trs.find(".cancl").click(function () {
122 $tr = $(this).closest("tr");
123 $tds = $tr.find("td");
124 $.each($tds.filter(":lt(" + ($tds.size() - 1) + ")"), function (i, td) {
125 var c = $(td).children().get(0);
126 if (c != null)
127 if (c.tagName.toLowerCase() == "select") {
128 $(td).html(c.options【c.selectedIndex】.text);
129 }
130 else if (c.tagName.toLowerCase() == "input") {
131 $(td).html(c.value);
132 }
133 / 可以在此处扩展input、select以外的元素取消行为 /
134 });
135 $tr.find(".onok, .cancl, .edit, .del").toggle();
136 return false;
137 });
138 };
139
140 $.fn.editable.defaults = {
141 head: false,
142 /
143 如果为空那么所有的列都可以编辑，并且默认为文本框的方式编辑
144 如下形式：
145 { {colindex:'', edittype:'', ctrid:'', css:''}, ...}
146 edittype 0:input 1:checkbox 2:select
147 /
148 //editcol:{},
149 /
150 设置不可以编辑的列，默认为空
151 如下形式：
152 【0,2,3,...】
153 /
154 noeditcol: 【】,
155 onok: function () {
156 alert("this's default onok click event");
157 return true;
158 },
159 ondel: function () {
160 alert("this's default on del click event");
161 return true;
162 },
163 editcss: "edit",
164 delcss: "del",
165 onokcss: "onok",
166 canclcss: "cancl"
167 };
168 })(jQuery);
下面来看下插件的效果
1.数据表格
2.添加编辑功能
1 $(function () {
2 $("table").editable({
3 head: true, //有表头
4 noeditcol: 【0】, //第一列不可编辑
5 editcol: 【{ colindex: 1 }, { colindex: 2, edittype: 2, ctrid: "sel"}】, //配置表格的编辑列 ctrid:为关联的dom元素id
6 onok: function () {
7 return false; //返回false表示失败，dom元素不会有变化
8 },
9 ondel: function () {
10 return true; //返回false表示成功，dom元素相应有变化
11 }
12 });
13 });
3.添加编辑后的效果
注：另外可以配置编辑功能中的几个按钮样式，详见代码咯 ；)
文件源码：editable.rar
大龄程序猿，分享互联网开发相关知识！前端、后端，架构等内容，欢迎关注公众号 chengxuyuangangzi
