Editable jquery table plugin

/* Editable table plug-in V1.0 * // * Author: Dust margin xcl Date: 2011-12-02 * // * update: 2011-12-05 * // * QQ: 80213876 * // * description: double-click Edit and double-click to save more parameters. See defaults */var tablelistinfo = {init: function (options) {Options = $. extend (tablelistinfo. defaults, options); // here, multiple objects are merged into one. Here, if you write a new parameter during the call, you will use your new parameter. If not, you will use the default parameter. // Slide color $ (options. tableclass ). hover (function () {$ (this ). addclass (options. trhoverclass);}, function () {$ (this ). removeclass (options. trhoverclass) ;}); // set the style of the odd and even rows $ (options. tableclass + ": odd "). addclass (options. troddclass); $ (options. tableclass + ": Even "). addclass (options. trevenclass); // click to select $ (options. tableclass ). live ("click", function () {$ (this ). hasclass (options. trselectedclass )? $ (This ). removeclass (options. trselectedclass): $ (this ). addclass (options. trselectedclass); Return false;}); // select all $ (options. selectallclass ). live ("click", function () {$ (options. tableclass ). addclass (options. trselectedclass); Return false;}); // do not select all $ (options. selectnothingclass ). live ("click", function () {$ (options. tableclass ). removeclass (options. trselectedclass); Return false;}); // select $ (options. sel Ectotherclass). Live ("click", function () {$ (options. tableclass). Each (function () {$ (this). hasclass (options. trselectedclass )? $ (This ). removeclass (options. trselectedclass): $ (this ). addclass (options. trselectedclass) ;}); return false ;}); // Delete $ (options. delclass ). live ("click", function () {var IDs = []; var trobjs = []; $ (options. tableclass ). each (function () {if ($ (this ). hasclass (options. trselectedclass) {IDs. push ($ (this ). ATTR (options. idattr); trobjs. push ($ (this) ;}}); If (IDs. length> 0) {If (options. delcallback! = NULL) {var STR = options. delcallback (IDs, trobjs ). split (","); // ID array for (VAR I = 0; I <trobjs. length; I ++) {var flag = 1; for (VAR m = 0; m <Str. length; m ++) {If (trobjs [I]. ATTR (options. idattr) = STR [m]) // Delete the failed row {flag = 0; break;} If (flag = 1) {trobjs [I]. fadeto ("normal", 0.6, function () {$ (this ). remove () ;}}}return false ;}); // edit $ (options. editclass ). live ("click", function () {var IDs = []; var trobjs = []; $ (Options. tableclass ). each (function () {if ($ (this ). hasclass (options. trselectedclass) {IDs. push ($ (this ). ATTR (options. idattr); trobjs. push ($ (this) ;}}); If (IDs. length> 1) {alert (options. treditmsg); Return false;} else if (IDs. length = 1) {If (options. editcallback! = NULL) {options. editcallback (IDs, trobjs) ;}} return false ;}); // click the "cancel edit all" button $ (options. cancleallclass ). live ("click", function () {$ (options. tableclass + ". cancleeditcurrenttr "). click (); Return false ;}); // click "unedit" behind the row $ (". cancleeditcurrenttr "). live ("dblclick", function (event) {event. stoppropagation (); Return false ;}). live ("click", function (event) {$ parnettr = $ (this ). closest ("TR"); $ Parn Ettr.html (Unescape ($ parnettr. ATTR ("oldinfo "))). removeattr ("oldinfo"); event. stoppropagation (); Return false ;}); // double-click tr (event switchover, double-click Edit, and then double-click Edit to save) $ (options. tableclass ). live ("dblclick", function (event) {if ($ (this ). ATTR ("oldinfo") = undefined) {// The current TR is not in the editing Status $ (this ). ATTR ("oldinfo", escape(%(this%.html (); // Save the HTML of Tr when it is not edited // generate editable tr if (options. trsavecallback! = NULL) {If (options. tdenableeditclass = "") return false; $ currenttds = $ (this ). find ("TD" + options. tdenableeditclass) $ currenttrlinetr = $ (this); $ currenttds. each (function (I) {var v = $. trim ($ (this ). text (); plaintext (this).html ("<input type = \" text \ "" + options. tdeditinputattr + "class = \" "+ options. tdeditinputclass + "\" value = \ "" + V + "\"/> "); if (I = $ currenttds. length-1) // if it is the last TD, a button "unedit" is generated later "{ $ ($ Currenttds [I]). find (". "+ options. tdeditinputclass ). after ("<a href = \" javascript: void (0); \ "class = \" cancleeditcurrenttr \ ">" + options. canclebtntext + "</a>") ;}}}else {// Save the tr callback data // extract the data in each column of the current row and coexist in the array. VaR trvalue = []; $ (this ). find ("TD "). each (function () {if ($ (this ). find (": Input "). length> 0) // If the column contains input, {trvalue is extracted. push ($. trim (escape ($ (this ). find (": Input") [0]). val ();} else {trvalue. push ($. trim (escape ($ (this ). text () ;}}); If (options. trsavecallback ($ (this ). ATTR (options. idattr), trvalue) = 1) {// saved successfully $ (this ). removeattr ("oldinfo"); $ (this ). find ("TD "). each (function (I) {$ (this ). HTML (Unescape (trvalue [I]);} else {// save failed // failed (this).html (Unescape ($ (this ). ATTR ("oldinfo "))). removeattr ("oldinfo") ;}} event. stoppropagation (); Return false ;}); // click Save all $ (options. saveallclass ). live ("click", function () {If (options. trsaveallcallback! = NULL) {var currenteditobjs = []; var IDs = []; for (VAR I = 0; I <$ (options. tableclass ). length; I ++) {if ($ (options. tableclass) [I]). ATTR ("oldinfo ")! = Undefined) {currenteditobjs. push ($ (options. tableclass) [I]); IDs. push ($ (options. tableclass) [I]). ATTR (options. idattr);} If (currenteditobjs. length = 0) return false; var failids = (options. trsaveallcallback (IDs, currenteditobjs )). split (","); // The returned result is a failed Id set (string separated by |) for (VAR m = 0; m <currenteditobjs. length; m ++) {var flag = 0; For (VAR f = 0; F <failids. length; F ++) {// failure if (failids [F] = Currenteditobjs [M]. ATTR (options. idattr) {// currenteditobjs?m=.html (Unescape (currenteditobjs [M]. ATTR ("oldinfo "))). removeattr ("oldinfo"); flag = 1; break ;}}if (flag = 1) continue; // extracts data from each column of the current row and saves it to the array. VaR trvalue = []; currenteditobjs [M]. find ("TD "). each (function () {if ($ (this ). find (": Input "). length> 0) // If the column contains input, {trvalue is extracted. push ($. trim (escape ($ (this ). find (": Input") [0]). val ();} else {trvalue. push ($. trim (escape ($ (this ). text () ;}}); currenteditobjs [M]. removeattr ("oldinfo"); currenteditobjs [M]. find ("TD "). each (function (I) {detail (this).html (Unescape (trvalue [I]) ;}} return false ;}) ;}, Defaults: {// note the style and Selector tableclass :". tablelist TR: GT (0) ", // table container class trhoverclass:" trhover ", // slide-over style trselectedclass:" trselected ", // The selected style delclass :". delselected ", // Delete the button class editclass :". editselected ", // edit button class selectallclass :". selectall ", // select all button class selectnothingclass :". selectnothing ", // all do not select the button class selectotherclass :". selectother ", // The deselected button class idattr:" Ref ", // The row attribute delcall that stores the ID Back: NULL, // Delete the callback function (IDs: ref attribute value set; trobjs: JQ object array of the row to be deleted) editcallback: NULL, // edit the callback function (IDs: set of ref attribute values; trobjs: the JQ object array of the row to be edited) trsavecallback: NULL, // double-click the edited tr to save the callback function (ID: the ref attribute value of the current row; trobj: JQ object of the tr to be edited) trsaveallcallback: NULL, // save all the callback functions (IDs: the ref attribute value of the current row; trobjs: JQ object of the tr to be edited) tdenableeditclass :". enableedit ", //" "indicates that every TD cannot be edited. If it is not empty, the TD of the specified class can edit tdeditinputclass:" editinput ", // The style tdeditinputattr of the input in the column being edited: "", // Other attributes of the input in the editing column. Format: "name = 'xxx' id = 'xx'" troddclass: "Trodd ", // odd row style trevenclass: "treven", // even row style treditmsg: "You can only select one to edit! ", // If you have selected multiple records for editing, the reminder canclebtntext:" unedit ", // The text cancleallclass :". cancleeditall ", // cancel all the buttons class saveallclass :". saveeditall "// save all button class }}

/*css hack by xcl  2011-12-01*/.trHover{background:#eee!important;color:#f00;}.trSelected{background:#9f6!important;color:#f00;}.tableList{border:solid 1px #95b3d7;border-collapse:collapse;}.tableList td{border:solid 1px #95b3d7;}.trOdd{background:#F2FFFF;}.trEven{background:#F0F5FF;}.EditInput{width:80px;}

 

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> 
 
 
 
 
: Http://ishare.iask.sina.com.cn/f/22778265.html