/** 
 * Created by DreamBoy on 2016/4/19. 
 */ 
$(function() { 
 $.fn.handleTable = function (options) { 
 //1.Settings 初始化設(shè)置 
 var c = $.extend({ 
  "operatePos" : -1, //-1表示默認(rèn)操作列為最后一列 
  "handleFirst" : false, //第一行是否作為操作的對象 
  "edit" : "編輯", 
  "save" : "保存", 
  "cancel" : "取消", 
  "add" : "添加", 
  "confirm" : "確認(rèn)", 
  "del" : "刪除", 
  "editableCols" : "all", //可編輯的列，從0開始 
  //"pos" : 0, //位置位于該列開頭，還是結(jié)尾（左側(cè)或右側(cè)） 
  "order" : ["edit", "add", "del"], //指定三個功能的順序 
  "saveCallback" : function(data, isSuccess) { //這里可以寫ajax內(nèi)容，用于保存編輯后的內(nèi)容 
  //data: 返回的數(shù)據(jù) 
  //isSuccess: 方法，用于保存數(shù)據(jù)成功后，將可編輯狀態(tài)變?yōu)椴豢删庉嫚顟B(tài) 
  //ajax請求成功（保存數(shù)據(jù)成功），才回調(diào)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ù)成功后，將對應(yīng)行刪除 
  } 
 }, options); 
 
 //表格的列數(shù) 
 var colsNum = $(this).find('tr').last().children().size(); 
 
 //2.初始化操作列，默認(rèn)為最后一列，從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) { //如果操作第一行，就把放置操作的列內(nèi)容置為空 
  allTd.eq(i).html(""); 
  } 
  rowsTd.push(allTd.eq(i)[0]); 
 } 
 
 //6.修改設(shè)置 order 為空時的默認(rèn)值 
 if(c.order.length == 0) { 
  c.order = ["edit"]; 
 } 
 
 //7.保存可編輯的列 
 var cols = getEditableCols(); 
 
 //8.初始化鏈接的構(gòu)建 
 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); 
   //“確認(rèn)”鏈接 
   confirmLink = createLink(c.confirm); 
   //“取消”鏈接 
   cancelLink = createLink(c.cancel); 
   break; 
   case "del": 
   //“刪除”鏈接 
   delLink = createLink(c.del); 
   break; 
  } 
  } 
 } 
 
 /** 
  * 獲取可進(jìn)行編輯操作的列 
  */ 
 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ù)設(shè)置提供的操作 
  * @param func 需要設(shè)置的操作 
  * @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'); //獲取被點(diǎn)擊的當(dāng)前行 
   var data = []; //保存修改后的數(shù)據(jù)到數(shù)據(jù)內(nèi) 
   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表示的是 被點(diǎn)擊的 編輯鏈接 
   c.saveCallback(data, function() { 
   toEdit($this, true); 
   }); 
  } 
  }); 
  var afterSave = []; //保存修改前的信息，用于用戶點(diǎn)擊取消后的數(shù)值返回操作 
  //修改為“保存”狀態(tài) 
  function toSave(ele) { 
  $(ele).html(c.save); //修改為“保存” 
  $(ele).after(cancelLink); //添加相應(yīng)的取消保存的“取消鏈接” 
  $(ele).next().on('click', function() { 
   //if($(this).html() == c.cancel.replace(eval("/\'/gi"),"\"")) { 
   toEdit(ele, false); 
   //} 
  }); 
 
  //獲取被點(diǎn)擊編輯的當(dāng)前行 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標(biāo)志判斷是 
  // 因?yàn)辄c(diǎn)擊了“保存”（保存成功）變?yōu)椤熬庉嫛睜顟B(tài)的，還是因?yàn)辄c(diǎn)擊了“取消”變?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() { 
  //獲取被點(diǎn)擊“添加”的當(dāng)前行 tr jQuery對象 
  var p = $(this).parents('tr'); 
  var copyRow = p.clone(); //構(gòu)建新的一行 
  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(""); 
   //------------這里可以進(jìn)行修改 
   initFunc(c.order, last); 
   }); 
  }); 
 
  $(confirm).after(cancelLink); //添加相應(yīng)的取消保存的“取消鏈接” 
  $(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中的單引號轉(zhuǎn)為雙引號 
  * @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內(nèi)容，用于保存編輯后的內(nèi)容 
   //data: 返回的數(shù)據(jù) 
   //isSucess: 方法，用于保存數(shù)據(jù)成功后，將可編輯狀態(tài)變?yōu)椴豢删庉嫚顟B(tài) 
   var flag = true; //ajax請求成功（保存數(shù)據(jù)成功），才回調(diào)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>