我的思路是这样的：

1.对任何一个 table, tr 都可以添加编辑、删除功能——功能独立

2.可以自动的完成编辑、取消功能，如点击编辑， 表格内容自动变成编辑框、下拉框等， 点击取消结束编辑状态

3.添加删除、确定(即更新)事件——只需要添加自己服务端的删除、更新代码就可以

4.能够自定义设置可编辑列，不可编辑列——方便定制编辑功能

 

下面是我实现的功能代码：

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: "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 } 40 }); 41 42 $trs = $(trs); 43 if ($trs.size() == 0 || (opt.head && $trs.size() == 1)) 44 return false; 45 46 var button = "<td><a href='#' class='" + opt.editcss + "'>编辑</a> <a href='#' class='" + opt.delcss + "'>删除</a><a href='#' class='" + opt.onokcss + "'>确定</a> <a href='#' class='" + opt.canclcss + "'>取消</a></td>"; 47 48 $trs.each(function (i, tr) { 49 if (opt.head && i == 0) { 50 $(tr).append("<td></td>"); 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("<input type='text' value='" + t + "' " + css + " />"); 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("<input type='text' value='" + t + "' />"); 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.添加编辑后的效果

 

注：另外可以配置编辑功能中的几个按钮样式，详见代码咯 ；)