edittable.js 提供编辑表格当前行、添加一行、删除当前行的操作，其中可以设置参数，如：
operatepos 用于设置放置操作的列，从0开始，-1表示以最后一列作为放置操作的列；（这里的操作包括 编辑当前行、在当前行下添加一行、删除当前行）
handlefirst 设置表格的第一行是否作为操作的对象，true为真，false为假；
edit、save、cancel、add、confirm、del 分别设置显示操作的操作名，默认显示“编辑”、“保存”、“取消”、“添加”、“确认”、“删除”字样；
editablecols 设置可被编辑的列，从0开始，以数组形式进行设置，如 [ 1, 2] ，表示第2、3列进行编辑操作时，可以被编辑；可以传入 all ，表示选中所有列可被编辑；当然程序中会自动排除 已经设置要放置操作的列；
order 设置表格需要的操作，同时可以设置操作排放的顺序；参数为数组形式，数组中的值可以为edit、add、del；传入空数组的话，默认提供edit编辑操作，相当于设置 [ edit ] 参数；此外默认提供所有功能，即编辑、添加、删除，相当于设置 [ edit, add, del] 参数，且顺序为编辑-》添加-》删除；可以修改三者的顺序，如 [ add, edit, del ]；
savecallback 当提供编辑功能后，在编辑当前行的过程中，点击保存后的回调函数；需要用户在使用编辑功能的同时，设置该参数，当进行保存过中，该函数可以使用ajax传递编辑后的数据data（保存在data数组中），当ajax保存数据成功后应该还需要调用函数 参数中的 issuccess 方法，以修改界面中的可编辑状态为不可编辑状态；
addcallback和delcallback与savecallback同理，只是分别应用在不同的操作上——添加和删除。
edittable.js
/** * created by dreamboy on 2016/4/19. */ $(function() { $.fn.handletable = function (options) { //1.settings 初始化设置 var c = $.extend({ operatepos : -1, //-1表示默认操作列为最后一列 handlefirst : false, //第一行是否作为操作的对象 edit : 编辑, save : 保存, cancel : 取消, add : 添加, confirm : 确认, del : 删除, editablecols : all, //可编辑的列，从0开始 //pos : 0, //位置位于该列开头，还是结尾（左侧或右侧） order : [edit, add, del], //指定三个功能的顺序 savecallback : function(data, issuccess) { //这里可以写ajax内容，用于保存编辑后的内容 //data: 返回的数据 //issuccess: 方法，用于保存数据成功后，将可编辑状态变为不可编辑状态 //ajax请求成功（保存数据成功），才回调issuccess函数（修改保存状态为编辑状态） }, addcallback : function(data, issuccess) { //issuccess: 方法，用于添加数据成功后，将可编辑状态变为不可编辑状态 }, delcallback : function(issuccess) { //issuccess: 方法，用于删除数据成功后，将对应行删除 } }, options); //表格的列数 var colsnum = $(this).find('tr').last().children().size(); //2.初始化操作列，默认为最后一列，从1算起 if(c.operatepos == -1) { c.operatepos = colsnum - 1; } //3.获取所有需要被操作的行 var rows = $(this).find('tr'); if(!c.handlefirst) { rows = rows.not(:eq(0)); } //4.获取放置“操作”的列，通过operatepos获取 var rowstd = []; var alltd = rows.children(); for(var i = c.operatepos; i <= alltd.size(); i += colsnum) { if(c.handlefirst) { //如果操作第一行，就把放置操作的列内容置为空 alltd.eq(i).html(); } rowstd.push(alltd.eq(i)[0]); } //6.修改设置 order 为空时的默认值 if(c.order.length == 0) { c.order = [edit]; } //7.保存可编辑的列 var cols = geteditablecols(); //8.初始化链接的构建 var savelink = , cancellink = , editlink = , addlink = , confirmlink = , dellink = ; initlink(); //9.初始化操作 initfunc(c.order, rowstd); /** * 创建操作链接 */ function createlink(str) { return + str + ; } /** * 初始各种操作的链接 */ function initlink() { for(var i = 0; i < c.order.length; i++) { switch (c.order[i]) { case edit: //“编辑”链接 editlink = createlink(c.edit); savelink = createlink(c.save); cancellink = createlink(c.cancel); break; case add: //“添加”链接 addlink = createlink(c.add); //“确认”链接 confirmlink = createlink(c.confirm); //“取消”链接 cancellink = createlink(c.cancel); break; case del: //“删除”链接 dellink = createlink(c.del); break; } } } /** * 获取可进行编辑操作的列 */ function geteditablecols() { var cols = c.editablecols; if($.type(c.editablecols) != array && cols == all) { //如果是所有列都可以编辑的话 cols = []; for(var i = 0; i < colsnum; i++) { if(i != c.operatepos) { //排除放置操作的列 cols.push(i); } } } else if($.type(c.editablecols) == array) { //有指定选择编辑的列的话需要排序放置“编辑”功能的列 var copycols = []; for(var i = 0; i < cols.length; i++) { if(cols[i] != c.operatepos) { copycols.push(cols[i]); } } cols = copycols; } return cols; } /** * 根据c.order参数设置提供的操作 * @param func 需要设置的操作 * @param cols 放置操作的列 */ function initfunc(func, cols) { for(var i = 0; i < func.length; i++) { var o = func[i]; switch(o) { case edit: createedit(cols); break; case add: createadd(cols); break; case del: createdel(cols); break; } } } /** * 创建“编辑一行”的功能 * @param operatecol 放置编辑操作的列 */ function createedit(operatecol) { $(editlink).appendto(operatecol).on(click, function() { if(replacequote($(this).html()) == replacequote(c.edit)) { //如果此时是编辑状态 tosave(this); //将编辑状态变为保存状态 } else if(replacequote($(this).html()) == replacequote(c.save)) { //如果此时是保存状态 var p = $(this).parents('tr'); //获取被点击的当前行 var data = []; //保存修改后的数据到数据内 for(var i = 0; i < cols.length; i++) { var tr = p.children().eq(cols[i]); var inputvalue = tr.children('input').val(); data.push(inputvalue); } $this = this; //此时的this表示的是 被点击的 编辑链接 c.savecallback(data, function() { toedit($this, true); }); } }); var aftersave = []; //保存修改前的信息，用于用户点击取消后的数值返回操作 //修改为“保存”状态 function tosave(ele) { $(ele).html(c.save); //修改为“保存” $(ele).after(cancellink); //添加相应的取消保存的“取消链接” $(ele).next().on('click', function() { //if($(this).html() == c.cancel.replace(eval(/\'/gi),\)) { toedit(ele, false); //} }); //获取被点击编辑的当前行 tr jquery对象 var p = $(ele).parents('tr'); aftersave = []; //清空原来保存的数据 for(var i = 0; i < cols.length; i++) { var tr = p.children().eq(cols[i]); var edittr = ; aftersave.push(tr.html()); //保存未修改前的数据 tr.html(edittr); } } //修改为“编辑”状态（此时，需要通过issave标志判断是 // 因为点击了“保存”（保存成功）变为“编辑”状态的，还是因为点击了“取消”变为“编辑”状态的） function toedit(ele, issave) { $(ele).html(c.edit); if(replacequote($(ele).next().html()) == replacequote(c.cancel)) { $(ele).next().remove(); } var p = $(ele).parents('tr'); for(var i = 0; i < cols.length; i++) { var tr = p.children().eq(cols[i]); var value; if(issave) { value = tr.children('input').val(); } else { value = aftersave[i]; } tr.html(value); } } } /** * 创建“添加一行”的功能 * @param operatecol */ function createadd(operatecol) { $(addlink).appendto(operatecol).on(click, function() { //获取被点击“添加”的当前行 tr jquery对象 var p = $(this).parents('tr'); var copyrow = p.clone(); //构建新的一行 var input = ; var childlen = p.children().length; for(var i = 0; i < childlen; i++) { copyrow.children().eq(i).html(); } //最后一行是操作行 var last = copyrow.children().eq(c.operatepos); last.html(); p.after(copyrow); var confirm = $(confirmlink).appendto(last).on(click, function() { var data = []; for(var i = 0; i < childlen; i++) { if(i != c.operatepos) { var v = copyrow.children().eq(i).children(input).val(); data.push(v); copyrow.children().eq(i).html(v); } } c.addcallback(data, function() { last.html(); //------------这里可以进行修改 initfunc(c.order, last); }); }); $(confirm).after(cancellink); //添加相应的取消保存的“取消链接” $(confirm).next().on('click', function() { copyrow.remove(); }); }); } /** * 创建“删除一行”的功能 * @param operatecol */ function createdel(operatecol) { $(dellink).appendto(operatecol).on(click, function() { var _this = this; c.delcallback(function() { $(_this).parents('tr').remove(); }); }); } /** * 将str中的单引号转为双引号 * @param str */ function replacequote(str) { return str.replace(/\'/g, \); } }; });
使用过程中需要注意：需要在对应的table中加入可选择到的选择器，还有需要在放置”操作“的列放置空标签 用于存放”操作“。
使用案例如下：
目录结构：
index.html
表格 # test first name last name username operations
1 mark otto @mdo
2 jacob thornton @fat
3 larry the bird @twitter

运行结果如下：
使用编辑操作：
进行修改：
点击保存：
添加多行：
在其中添加一些数据：
点击“确定”：
可以取消其他多余要添加的行：