Home > Developer > JavaScript
Web Effects Implementation table row Increase Delete Modify
Click the Add button to add an empty record that can be modified.
Click the table cell to modify the text.
The saved interface is implemented after modification.
If you add a new record without making any modification values NULL, the Save all will be ignored.
Save all of the modified values, the original data will not be repeatedly saved.
Prompts to save if the data is not saved while refreshing.
Click Delete if the invalid data is temporarily added to delete directly, if the record is saved to achieve the record delete the interface
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title>model</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "Content-language" content= "ZH-CN"/>
<style type= "text/css Tutorials" media= "all" >
div {Width:80%;margin:auto;}
Table {margin:15px 0;}
Th, tr {width:20%;} /* Modify here, if the table has three columns is 33.333%, four columns is 25% * *
span {display:block;line-height:100%;} /* Make the click of the entire cell have effect * *
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 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 it accordingly. *
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 to 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 () {//* Lose focus remove Modify box *
var span = document.createelement (' span ');
Span.appendchild (document.createTextNode (this.value?this.value: ' null ');/* If you modify the default value of the cell, make a corresponding change here. *
Span.onclick =spanevent;
This.parentnode.appendchild (span);
This.parentnode.removechild (this);
if (value!=this.value) {/* If content changes generate save 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 save processing Event
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 the element now * *
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 event to new element * *
Td.appendchild (DEL);
}else{
var span = document.createelement (' span ');
Span.appendchild (document.createTextNode (' null '));/* If you modify the default value when you add it, the */
Td.appendchild (span);
Span.onclick =spanevent;
}
Tr.appendchild (TD);
}
Tbody.appendchild (TR);
};
var getalldata = function () {/* Save all data Parse/*
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 save All data Save Event/*
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 has not been saved, do you want to save the data? ')
if (y) {
Saveallbtn.click ();
}
}
};
};
Window.onload = function () {
var table = document.getElementById (' TB '),/* The form to be manipulated * *
Colnum = 5,/* Here to modify the number of columns in the table * *
SAVEALLBTN = document.getElementById (' SaveAll '),/* Save all buttons */
ADDBTN = document.getElementById (' Add '),/* Add button/*
Saver = function () {
/* Here can be added Ajax effect and database tutorial Interactive data is a number of groups, need to be changed to JSON/
Alert (' The data to be sent is data: ' "' +this.data+ '") call Ajax to implement background save! Achieve a slight ... ');
},
Allsaver = function () {
/* Here can be added Ajax effect and database interaction data is a number of groups, need to be changed to JSON * * *
Alert (' The data to be transmitted is an array of alldtat: ' +this.alldata+ ' "here invoke Ajax to implement the background save!) Achieve a slight ... ');
},
Deler = function () {
/* Here can be added Ajax effect and database interaction data is a number of groups, need to be changed to JSON * * *
Alert (' The data to be sent is data: ' ' +this.data+ ' "calls Ajax to implement background deletion!) Achieve a slight ... ');
};
Window.jcrud (Table,colnum,saveallbtn,addbtn,saver,allsaver,deler);
};
]]>
</script>
<body>
<div>
<table width= "100%" border= "1" id= "TB" >
<tr><!--Modify how many columns there are and how many th elements are added here-->
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th> Operations </th>
</tr>
<!--The following is an example of the format of the data, only this format can guarantee the 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= "added"/>
<div style= "border:3px Red double;padding:2px 3px;margin:8px;" ><ul style= "margin:0;" >
<li> Click the Add button to add an empty record that can be modified. </li>
<li> Click the table cell to modify the text. </li>
<li> implemented the saved interface after modification. </li>
<li> if new records are added and none of the modification values are NULL, the save all will be ignored. </li>
<li> Save all only the modified values, the original data will not be repeatedly saved. </li>
<li> prompts to save if the data is not saved when refreshing. </li>
<li> Click Delete if the invalid data is temporarily added to delete directly, if the record is saved to achieve the record deletion of the interface. </li>
</ul>
</div>
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
