Bootstrap and jquery combine to implement editable tables _jquery

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", "Add": "Add", "C Onfirm ":" Confirm ", del": "Delete", "Editablecols": "All",//editable columns, starting from 0//"POS": 0,//position at the beginning of the column, or at the end (left or right) "order": [edi T "," Add "," Del "],//Specify three function order" Savecallback ": function (data, issuccess) {//here can write Ajax content to save the edited content//data: returned data//is Success: Method, to save the data after success, the editable state becomes non-editable//ajax the request succeeds (save the data successfully) before the callback issuccess function (Modify save state to edit state)}, "Addcallback": function (data , issuccess) {//issuccess: method, used to add data after success, make editable state non-editable}, "Delcallback": function (issuccess) {//issuccess: method, for deleting number 
After success, the corresponding row will be deleted}, 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 counts as 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 row of the action, place the column content 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 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 the action to be set * @param cols the column/function Initfunc (func, cols) of the placement action {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 one row" feature * @param operatecol column/function CreateEdit (operatecol) {$ (Editlink) for placing edit operations. Appendto (Ope Ratecol). On ("click", Function () {if (Replacequote (). 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 save 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 (Cancellink ); Add the corresponding cancel saved unlink $ (ele). On (' click ', Function () {//if (). html () = = C.cancel.replace (eval ("/\ '/gi"), "\" 
")) {Toedit (ele, false); 
//} 
}); Get the click of the editor to move forward 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 state (at this point, needs to be judged by the ISSAVE flag is//Because the click of "Save" (save success) into the "edit" state, or because clicked "Cancel" changed to "edit" status of the 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); /** * Creates a "Add Row" feature * @param operatecol/function Createadd (operatecol) {$ (Addlink). Appendto (Operatecol). On 
("click", Function () {//Get clicked "Add" Current line 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\/> 
"); 
//The last line is the action line var 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 (Operatecol). On ("Clic 
K ", 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: