/** * 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: 返回的數(shù)據(jù) //isSuccess: 方法，用于保存數(shù)據(jù)成功后，將可編輯狀態(tài)變?yōu)椴豢删庉嫚顟B(tài) //ajax請求成功（保存數(shù)據(jù)成功），才回調isSuccess函數(shù)（修改保存狀態(tài)為編輯狀態(tài)） }, "addCallback" : function(data, isSuccess) { //isSuccess: 方法，用于添加數(shù)據(jù)成功后，將可編輯狀態(tài)變?yōu)椴豢删庉嫚顟B(tài) }, "delCallback" : function(isSuccess) { //isSuccess: 方法，用于刪除數(shù)據(jù)成功后，將對應行刪除 } }, options); //表格的列數(shù) 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); /** * 創(chuàng)建操作鏈接 */ function createLink(str) { return "<a href=/"javascript:void(0)/" style=/"margin:0 3px/">" + str + "</a>"; } /** * 初始各種操作的鏈接 */ 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; } /** * 根據(jù)c.order參數(shù)設置提供的操作 * @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; } } } /** * 創(chuàng)建“編輯一行”的功能 * @param operateCol 放置編輯操作的列 */ function createEdit(operateCol) { $(editLink).appendTo(operateCol).on("click", function() { if(replaceQuote($(this).html()) == replaceQuote(c.edit)) { //如果此時是編輯狀態(tài) toSave(this); //將編輯狀態(tài)變?yōu)楸４鏍顟B(tài) } else if(replaceQuote($(this).html()) == replaceQuote(c.save)) { //如果此時是保存狀態(tài) var p = $(this).parents('tr'); //獲取被點擊的當前行 var data = []; //保存修改后的數(shù)據(jù)到數(shù)據(jù)內 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 = []; //保存修改前的信息，用于用戶點擊取消后的數(shù)值返回操作 //修改為“保存”狀態(tài) function toSave(ele) { $(ele).html(c.save); //修改為“保存” $(ele).after(cancelLink); //添加相應的取消保存的“取消鏈接” $(ele).next().on('click', function() { //if($(this).html() == c.cancel.replace(eval("http://'/gi"),"/"")) { toEdit(ele, false); //} }); //獲取被點擊編輯的當前行 tr jQuery對象 var p = $(ele).parents('tr'); afterSave = []; //清空原來保存的數(shù)據(jù) for(var i = 0; i < cols.length; i++) { var tr = p.children().eq(cols[i]); var editTr = "<input type=/"text/" class=/"form-control/" value=/"" + tr.html() + "/"/>"; afterSave.push(tr.html()); //保存未修改前的數(shù)據(jù) tr.html(editTr); } } //修改為“編輯”狀態(tài)（此時，需要通過isSave標志判斷是 // 因為點擊了“保存”（保存成功）變?yōu)椤熬庉嫛睜顟B(tài)的，還是因為點擊了“取消”變?yōu)椤熬庉嫛睜顟B(tài)的） 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); } } } /** * 創(chuàng)建“添加一行”的功能 * @param operateCol */ function createAdd(operateCol) { $(addLink).appendTo(operateCol).on("click", function() { //獲取被點擊“添加”的當前行 tr jQuery對象 var p = $(this).parents('tr'); var copyRow = p.clone(); //構建新的一行 var input = "<input type=/"text/"/>"; var childLen = p.children().length; for(var i = 0; i < childLen; i++) { copyRow.children().eq(i).html("<input type=/"text/" class=/"form-control/"/>"); } //最后一行是操作行 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(); }); }); } /** * 創(chuàng)建“刪除一行”的功能 * @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, "/""); } }; }); 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>表格</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />--> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="bs-example" data-example-id="hoverable-table"> <table class="table table-hover editable"> <thead> <tr> <th>#</th> <th>Test</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> <th>Operations</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td></td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td><!--<a href="javascript:void(0)" class="edit"></a>--></td> </tr> <tr> <th scope="row">2</th> <td></td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td><!--<a href="javascript:void(0)" class="edit"></a>--></td> </tr> <tr> <th scope="row">3</th> <td></td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> <td><!--<a href="javascript:void(0)" class="edit"></a>--></td> </tr> </tbody> </table> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="editTable.js"></script> <script> $(function() { //$('.edit').handleTable({"cancel" : "<span class='glyphicon glyphicon-remove'></span>"}); $('.editable').handleTable({ "handleFirst" : true, "cancel" : " <span class='glyphicon glyphicon-remove'></span> ", "edit" : " <span class='glyphicon glyphicon-edit'></span> ", "add" : " <span class='glyphicon glyphicon-plus'></span> ", "save" : " <span class='glyphicon glyphicon-saved'></span> ", "confirm" : " <span class='glyphicon glyphicon-ok'></span> ", "operatePos" : -1, "editableCols" : [2,3,4], "order": ["add","edit"], "saveCallback" : function(data, isSuccess) { //這里可以寫ajax內容，用于保存編輯后的內容 //data: 返回的數(shù)據(jù) //isSucess: 方法，用于保存數(shù)據(jù)成功后，將可編輯狀態(tài)變?yōu)椴豢删庉嫚顟B(tài) var flag = true; //ajax請求成功（保存數(shù)據(jù)成功），才回調isSuccess函數(shù)（修改保存狀態(tài)為編輯狀態(tài)） 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> </body> </html>