Using jquery to implement simple editable table _javascript techniques based on Bootstrap

Edittable.js provides an action to edit the current row of the table, add a row, and delete the current row, where you can set parameters such as:

Operatepos the column used to set the drop operation, starting at 0,-1 for the column in which the last column is placed; (this includes editing the current row, adding a row under the current line, deleting the current row)

Handlefirst sets whether the first row of the table is the object of the action, True True, false false;

Edit, save, Cancel, add, confirm, Del respectively set the operation name of the display operation, the default display "edit", "Save", "Cancel", "Add", "Confirm", "delete" the words;

Editablecols sets the columns that can be edited, starting from 0, set as an array, such as [1, 2], to indicate that the 2nd and 3 columns are edited, and that you can pass in "all" to indicate that all columns can be edited, and that the columns that have been set to be placed are automatically excluded from the program;

Order to set the action that the table requires, you can also set the order in which the operations are emitted; the parameters are arrays, the values in the array can be edit, add, Del, incoming empty arrays, and the edit edit action is provided by default, which is equivalent to setting the [edit] parameter; Add, delete, equivalent to set ["Edit", "Add", "del"] parameters, and order for edit-"add-" Delete, you can modify the order of the three, such as ["Add", "Edit", "Del"];

Savecallback when editing is available, click on the saved callback function while editing the current line, requiring the user to set the parameter while using the Edit feature, which, when saved, can pass the edited data (stored in the data array) using AJAX. When the AJAX data is saved successfully, it should also call the Issuccess method in the function parameter to modify the editable state in the interface is not editable;

Addcallback and Delcallback are similar to Savecallback, but are applied separately to different operations--additions and deletions.

edittable.js

/** * Created by Dreamboy on 2016/4/19. */$ (function () {$.fn.handletable = function (options) {//1.settings initialization set var c = $.extend ({"Operatepos":- 1,//-1 indicates that the default action is listed as the last column "Handlefirst": false,//whether the first row is the object of the Action "edit": "Editor", "Save": "Save", "Cancel": "Cancel", "a DD ": Add", "Confirm": "Confirm", "del": "Delete", "Editablecols": "All",//Editable column, starting from 0//"POS": 0,//position at the beginning of the column, or at the end ( Left or right) "order": ["Edit", "Add", "Del"],//Specify three function sequence "Savecallback": function (data, issuccess) {//here can write Ajax content, used to save Edited content//data: returned data//issuccess: method, used to save the data after success, the editable state becomes Non-editable//ajax request succeeded (save data successfully) before callback issuccess function (Modify save state to edit state)} , "Addcallback": function (data, issuccess) {//issuccess: Method, after the success of adding data, the editable state becomes non-editable}, "Delcallback": Func 
 
 tion (issuccess) {//issuccess: method, which deletes the corresponding row after successful deletion of the data}, options); 
 
 Number of columns in the table var Colsnum = $ (this). Find (' tr '). Last (). Children (). Size (); 2. Initializes the Action column, defaults to the last column, from 1 if (C.operatepos = = 1) {C.operatepos = colSNum-1; 
 //3. Gets all rows that need to be manipulated var rows = $ (this). Find (' tr '); 
 if (!c.handlefirst) {rows = Rows.not (": eq (0)"); 
 //4. Gets the column where the "action" is placed, and obtains the var rowstd by operatepos = []; 
 var alltd = Rows.children (); for (var i = C.operatepos i <= alltd.size (); i + = Colsnum) {if (C.handlefirst) {//If the first line of action, place the column contents of the drop operation to empty Alltd.eq 
  (i). HTML (""); 
 } rowstd.push (Alltd.eq (i) [0]); 
 //6 the default value if (C.order.length = = 0) {C.order = ["edit]" when the set order is empty; 
 
 //7. Save editable columns var cols = Geteditablecols (); 
 8. Initialize link construction var savelink = "", Cancellink = "", Editlink = "", Addlink = "", Confirmlink = "", Dellink = ""; 
 
 Initlink (); 
 
 9. Initialization Operation Initfunc (C.order, ROWSTD); /** * Create action link */function createlink (str) {return "<a href=\" javascript:void (0) \ "style=\" margin:0 
 3px\ ">" + str + "</a>"; /** * Initial various operations of the link/function Initlink () {for (var i = 0; i < c.order.length; i++) {switch (c.order[i) 
 {case ' edit '://' edit ' link  Editlink = Createlink (C.edit); 
   Savelink = Createlink (c.save); 
   Cancellink = Createlink (C.cancel); 
   Break 
   Case "Add"://"Add" link Addlink = Createlink (C.add); 
   "Confirm" link Confirmlink = Createlink (c.confirm); 
   "Cancel" link Cancellink = Createlink (C.cancel); 
   Break 
   Case "Del"://"delete" link Dellink = Createlink (C.del); 
  Break 
  /** * Get the editable column/function Geteditablecols () {var cols = C.editablecols; 
  if ($.type (c.editablecols)!= "Array" && cols = "All"} {//If all columns can be edited cols = []; 
   for (var i = 0; i < Colsnum i++) {if (I!= c.operatepos) {//Exclude column Cols.push for placement operations (i); 
  }} else if ($.type (c.editablecols) = = "Array") {//There is a column with the specified select Edit to sort the columns var copycols = []; 
   for (var i = 0; i < cols.length i++) {if (Cols[i]!= c.operatepos) {Copycols.push (cols[i)); 
  } cols = Copycols; 
 return cols; /** * The operation provided according to the C.order parameter setting * @param func needs to be setOperation * @param cols Placement Operation column/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 /** * Create edit line feature * @param operatecol column/function CreateEdit (operatecol) {$ editlin k). Appendto (Operatecol). On (' click ', function () {if (Replacequote ($ (this). HTML ()) = = Replacequote (c.edit)) {// If this is the edit state tosave (this); Change edit state to save state} else if (Replacequote (). HTML ()) = = Replacequote (c.save)) {//If this is the saved state var p = $ (this). Parents (' tr '); Gets the current line of the clicked var data = []; 
   Save the modified data into the 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 represents the clicked Edit link c.savecallback (data, function () {Toedit ($this, true); 
  }); 
  } 
  }); var aftersave = []; Save the change information before the user clicks on the canceled value to return the operation//change to "save" status function Tosave (ele) {$ (ele). HTML (c.save);//modified to "save" $ (ele). After (CAN Cellink); Add the corresponding cancel saved unlink $ (ele). On (' click ', Function () {//if (). html () = = C.cancel.replace (eval ("/\ '/gi"), "\ 
   "")) {Toedit (ele, false); 
 
  //} 
  }); 
 
  Gets the current line of the clicked Edit Tr jquery object var p = $ (ele). Parents (' tr '); Aftersave = []; 
   Empties the previously saved data 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 ()); 
  Save unmodified data before tr.html (EDITTR); }//modified to "edit" status (at this point, it is necessary to determine by Issave flag whether the "save" (saved) is changed to "edit" state, or the function Toedit (Ele, IsSa 
  VE) {$ (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); /** * Creates a "Add Row" feature * @param operatecol/function Createadd (operatecol) {$ (addlink). appendto 
  (Operatecol). On ("click", Function () {//Get the current line of the clicked "Add" Tr jquery object var p = $ (this). Parents (' tr '); var copyrow = P.clone (); 
  Constructing a new line of 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\/& 
 
  gt; ");} 
  The last line is the action line 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 (""); 
   ------------can be modified here Initfunc (C.order, last); 
  }); 
 
  }); $ (confirm). After (Cancellink); 
  Add the corresponding cancel saved unlink $ (confirm). Next (). On (' click ', Function () {copyrow.remove (); 
  }); 
 }); /** * Create "Delete Row" feature * @param operatecol/function Createdel (operatecol) {$ (Dellink). Appendto (Operatec 
  OL). On (' click ', function () {var _this = this; 
  C.delcallback (function () {$ (_this). Parents (' tr '). Remove (); 
  }); 
 }); 
 /** * Converts single quotes in STR to double quotes * @param str/function Replacequote (str) {return str.replace (/\ '/g, "\"); 
} 
 };  });

Note In use: You need to include a selectable selector in the corresponding table, and you need to place an empty label on the column where you want to place the action <td></td> to hold the operation.

The use case is as follows:

Directory structure:

Index.html

<! DOCTYPE html>  

The results of the operation are as follows

To use the Edit action:

To modify:

Click to Save:

Add multiple lines:

Add some data to it:

Click "OK":

You can cancel other extra lines that you want to add:

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.