<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh-CN" lang = "zh-CN">
<Head>
<Title> Model </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GB2312"/>
<Meta http-equiv = "Content-language" content = "zh-CN"/>
<Style type = "text/css" media = "all">
Div {width: 80%; margin: auto ;}
Table {margin: 15px 0 ;}
Th, tr {width: 20%;}/* modify it here. If three columns in the table are 33.333%, the four columns are 25% */
Span {display: block; line-height: 100%;}/* enables the entire cell to be clicked */
Table input {width: 98% ;}
Table a {float: left; margin: 0 3px ;}
</Style>
<Script type = "text/javascript">
// <! [CDATA [
Var JCRUD = function (tb, colnum, saveAllBtn, add, ajaxSaver, allAjaxSaver, ajaxDeler ){
Var del = tb. getElementsByTagName ('A ');
Var span = tb. getElementsByTagName ('span ');
Var ctr = [];/* Save the modified tr object */
Var delEvent = function (){
Var dder = this. parentNode. parentNode;
This. data = [];
For (VAR I = 0; I <dder. Children. Length-1; I ++)
This. Data [I] = dder. Children [I]. Children [0]. firstchild. nodevalue;
VaR tag = 0;
For (var j = 0; j <this. Data. length; j ++ ){
If (this. Data [J]! = 'Null') {/* if the default value of the cell is modified, modify the value here */
Tag = 1;
Break;
}
}
For (var k = 0; k <ctr. length; k ++) if (ctr [k] = dder) ctr. splice (k, 1 );
Dder. parentNode. removeChild (dder );
If (tag = 1) ajaxDeler. call (this );
};
Var spanEvent = function () {/* Click Generate modify box */
Var value = this. firstChild. nodeValue;
Var input = document. createElement ('input ');
Input. value = value;
This. parentNode. appendChild (input );
This. parentNode. removeChild (this );
Input. focus ();
Input. onblur = function () {/* remove the modification box with no focus */
Var span = document. createElement ('span ');
Span. appendChild (document. createTextNode (this. value? This. value: 'null');/* if the default value of the cell is modified, modify the value here */
Span. onclick = spanEvent;
This. parentNode. appendChild (span );
This. parentNode. removeChild (this );
If (value! = This. value) {/* If the content changes, generate and save the button */
Var tr = span. parentNode. parentNode
Tds = tr. children;
Btns = tds [colnum-1]. getElementsByTagName ('A ');
For (var I = 0; I <btns. length; I ++ ){
If (btns [I]. firstChild. nodeValue! = 'Save '){
Var saver = document. createElement ('A ');
Saver. href = "javascript :;";
Saver. appendChild (document. createTextNode ('save '));
} Else {
Var saver = btns [I];
}
}
TDS [TDS. Length-1]. appendchild (saver );
VaR tag = 0;
For (var k = 0; k <Ctr. length; k ++)
If (CTR [k] = TR) Tag = 1;
If (TAG =-0) CTR. Push (TR );
Saver. onclick = function () {/* Add and save processing events */
This. Data = [];
For (VAR I = 0; I <TDS. Length-1; I ++)
This. Data [I] = This. parentnode. parentnode. Children [I]. Children [0]. firstchild. nodevalue;
Ajaxsaver. Call (this );
For (VAR I = Ctr. Length-1; I> = 0; I --){
If (this. parentnode. parentnode === CTR [I]) {
Ctr. splice (I, 1 );
}
}
This. parentnode. removechild (this );
};
}
}
};
For (var I in Del) del [I]. onclick = delevent;/* add an event to an existing element */
For (var j in SPAN) span [J]. onclick = spanevent;
Add. onclick = function (){
VaR tbody = Tb. Children [0];
VaR TR = Document. createelement ('tr ');
For (var j = 0; j <colnum; j ++ ){
VaR TD = Document. createelement ('td ');
If (j = (colnum-1 )){
VaR del = Document. createelement ('A ');
Del. href = 'javascript :;';
Del. appendChild (document. createTextNode ('delete '));
Del. onclick = delEvent;/* add an event to the newly added element */
Td. appendChild (del );
} Else {
Var span = document. createElement ('span ');
Span. appendChild (document. createTextNode ('null');/* If you modify the default value when adding a file, modify the default value here */
Td. appendChild (span );
Span. onclick = spanEvent;
}
Tr. appendChild (td );
}
Tbody. appendChild (tr );
};
Var getAllData = function () {/* save all data parsing */
Var allData = [];
For (var I = 0; I <ctr. length; I ++ ){
AllData [I] = [];
For (var j = 0; j <CTR [I]. Children. Length-1; j ++)
Alldata [I]. Push (CTR [I]. Children [J]. Children [0]. firstchild. nodevalue );
CTR [I]. Children [colnum-1]. removechild (CTR [I]. Children [colnum-1]. Children [1]);
}
CTR = [];
Return alldata;
};
Saveallbtn. onclick = function () {/* add an event for saving all data */
This. alldata = getalldata ();
If (this. alldata. Length ){
AllAjaxSaver. call (this );
} Else {
Alert ('no data! ');
}
};
Window. onbeforeunload = function () {/* refresh prompt to save data */
If (ctr. length ){
Var y = confirm ('data is not saved yet. Do you want to save the data? ')
If (y ){
SaveAllBtn. click ();
}
}
};
};
Window. onload = function (){
Var table = document. getElementById ('tb'),/* table to be operated */
Colnum = 5,/* modify the number of columns in the table */
SaveAllBtn = document. getElementById ('saveall'),/* save all buttons */
AddBtn = document. getElementById ('add'),/* Add button */
Saver = function (){
/* The ajax effect can be added here to interact with the database. data is an array and can be changed to JSON */
Alert ('data to be transmitted is data: "'+ this. data +'". call ajax to save it in the background! Implementation ...... ');
},
AllSaver = function (){
/* The ajax effect can be added here to interact with the database. data is an array and can be changed to JSON */
Alert ('the data to be transmitted is the allDtat array: "'+ this. allData +'" here call ajax to save it in the background! Implementation ...... ');
},
Deler = function (){
/* The ajax effect can be added here to interact with the database. data is an array and can be changed to JSON */
Alert ('data to be transmitted is data: "'+ this. data +'" Here ajax is called to delete the background! Implementation ...... ');
};
Window. JCRUD (table, colnum, saveAllBtn, addBtn, saver, allSaver, deler );
};
//]>
</SCRIPT>
</Head>
<Body>
<Div>
<Table width = "100%" border = "1" id = "TB">
<Tr> <! -- Modify the number of columns and add the number of th elements. -->
<TH> A </Th>
<TH> B </Th>
<TH> C </Th>
<TH> d </Th>
<Th> operation </th>
</Tr>
<! -- The following is an example of data format. Only in this format can we ensure correct interaction with js. -->
<! --
<Tr>
<Td> <span> null </span> </td>
<Td> <span> null </span> </td>
<Td> <span> null </span> </td>
<Td> <a href = "javascript:;"> Del </a> </td>
</Tr>
-->
</Table>
<Input type = "button" id = "SaveAll" value = "Save all"/>
<Input type = "button" id = "Add" value = "Add"/>
<Div style = "border: 3px red double; padding: 2px 3px; margin: 8px;">
<H4 style = "color: red; margin: 3px;"> tip: </H4>
<Ul style = "margin: 0;">
<Li> click the Add button to add an empty record that can be modified. </LI>
<Li> click a table cell to modify the text. </LI>
<Li> after modification, the saved interface is implemented. </LI>
<Li> if a new record is added and no modification value is null, all records are ignored. </LI>
<Li> only modified values are saved when all values are saved. The original data is not retained. </LI>
<Li> if the data is not saved during refresh, the system prompts to save the data. </LI>
<Li> click Delete to delete invalid data temporarily added. If the record is saved, the record deletion interface is implemented. </LI>
</Ul>
</Div>
</Div>
</Body>
</Html>
