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 "
--> <script src="js/jquery-1.11.1.min.js?1.1.9">《script》 <script src="js/bootstrap.min.js?1.1.9">《script》 <script src="editTable.js?1.1.9">《script》 《script》 $(function() { //$('.edit').handleTable({"cancel" : ""}); $('.editable').handleTable({ "handleFirst" : true, "cancel" : " ", "edit" : " ", "add" : " ", "save" : " ", "confirm" : " ", "operatePos" : -1, "editableCols" : [2,3,4], "order": ["add","edit"], "saveCallback" : function(data, isSuccess) { //这里可以写ajax内容，用于保存编辑后的内容 //data: 返回的数据 //isSucess: 方法，用于保存数据成功后，将可编辑状态变为不可编辑状态 var flag = true; //ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态） if(flag) { isSuccess(); alert(data + " 保存成功"); } else { alert(data + " 保存失败"); } return true; }, "addCallback" : function(data,isSuccess) { var flag = true; if(flag) { isSuccess(); alert(data + " 增加成功"); } else { alert(data + " 增加失败"); } }, "delCallback" : function(isSuccess) { var flag = true; if(flag) { isSuccess(); alert("删除成功"); } else { alert("删除失败"); } } }); }); 《script》