A dynamic table implemented by Ajax allows you to add data rows, delete data rows, and copy rows in a timely manner. data can be copied or submitted regardless of whether data exists in the row, but you need to work with your submission page. It is good to use it in your design.
<! 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">
<Head>
<Title> Shijiazhuang retractable door </title>
<Meta http-equiv = Content-Type content = "text/html; charset = UTF-8">
<SCRIPT type = text/JavaScript>
VaR tobecolor = "# f8f9fc ";
VaR backcolor = "# ffffff ";
VaR tableid = "tbdata ";
VaR table;
VaR tbody;
VaR divshowinput;
Window. onload = function (){
Beginlisten ();
Table = Document. getelementbyid (tableid );
Tbody = table. getelementsbytagname ("tbody") [0];
Actionfill ();
Otherfill ();
Creatdiv ();
Divshowinput = Document. getelementbyid ("divshowinput ");
}
Function creatdiv (){
VaR filldiv = Document. createelement ("Div ");
Filldiv. setattribute ("ID", "divshowinput ");
VaR barp = Document. createelement ("p ");
Barp. setattribute ("ID", "bartitle ");
Barp. onclick = hidediv;
VaR defcomp = Document. createelement ("p ");
Defcomp. setattribute ("ID", "defcomp ");
Defcomp. onclick = hidediv;
VaR cleara = Document. createelement ("");
Cleara. setattribute ("href", "javascript: void 0 ");
Cleara. onclick = clearinput;
VaR clearatext = Document. createtextnode ("clear ");
Cleara. appendchild (clearatext );
Defcomp. appendchild (cleara );
VaR autop = Document. createelement ("p ");
Autop. setattribute ("ID", "autofillp ");
Filldiv. appendchild (barp );
Filldiv. appendchild (defcomp );
Filldiv. appendchild (autop );
Document. Body. appendchild (filldiv );
}
Function actionfill (){
VaR dbinputs = tbody. getelementsbytagname ("input ");
For (VAR I = 1; I <= dbinputs. Length-1; I ++ ){
Dbinputs [I]. onfocus = stoplisten;
Dbinputs [I]. onblur = beginlisten;
Dbinputs [I]. ondblclick = showdiv;
Dbinputs [I]. onmouseover = onchangtrcolor;
Dbinputs [I]. onmouseout = outchangtrcolor;
Dbinputs [I]. onclick = readyedit;
Dbinputs [I]. onkeydown = gonext;
}
}
Function otherfill (){
VaR bt_selectall = Document. getelementbyid ("bt_selectall ");
Bt_selectall.setattribute ("href", "javascript: void 0 ");
Bt_selectall.onclick = selectall;
VaR bt_delselect = Document. getelementbyid ("bt_delselect ");
Bt_delselect.setattribute ("href", "javascript: void 0 ");
Bt_delselect.onclick = delselect;
VaR bt_copyselect = Document. getelementbyid ("bt_copyselect ");
Bt_copyselect.setattribute ("href", "javascript: void 0 ");
Bt_copyselect.onclick = copyselect;
VaR bt_allclear = Document. getelementbyid ("bt_allclear ");
Bt_allclear.setattribute ("href", "javascript: void 0 ");
Bt_allclear.onclick = allclear;
VaR bt_senddata = Document. getelementbyid ("bt_senddata ");
Bt_senddata.setattribute ("href", "javascript: void 0 ");
Bt_senddata.onclick = senddata;
}
Function Ajax (URL, recvt, strings, resultf ){
This. url = URL;
This. Strings = strings;
This. XMLHTTP = This. createxmlhttprequest ();
This. resultf = resultf;
This. recvt = recvt;
If (this. XMLHTTP = NULL ){
Alert ("erro ");
Return;
}
VaR objxml = This. XMLHTTP;
VaR othis = this;
Objxml. onreadystatechange = function () {othis. handlestatechange ()};
}
Ajax. Prototype = {
Createxmlhttprequest: function (){
Try {return New activexobject ("msxml2.xmlhttp");} catch (e ){}
Try {return New activexobject ("Microsoft. XMLHTTP");} catch (e ){}
Try {return New XMLHttpRequest ();} catch (e ){}
Return NULL;
},
Createquerystring: function (){
VaR querystring = This. Strings;
Return querystring;
},
Get: function (){
Url = This. url;
VaR querystring = URL + "? Timestamp = "+ new date (). gettime () +" & "+ this. createquerystring ();
This. XMLHTTP. Open ("get", querystring, true );
This. XMLHTTP. Send (null );
},
Post: function (){
Url = This. url;
VaR url = URL + "? Timestamp = "+ new date (). gettime ();
VaR querystring = This. createquerystring ();
This. XMLHTTP. Open ("Post", URL, true );
This. XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
This. XMLHTTP. Send (querystring );
},
Handlestatechange: function (){
VaR XMLHTTP = This. XMLHTTP;
VaR recvt = This. recvt;
VaR resultf = This. resultf;
If (XMLHTTP. readystate = 4 ){
If (XMLHTTP. Status = 200 ){
Resultf. Call (this, recvt? XMLHTTP. responsexml: XMLHTTP. responsetext );
} Else {
Alert ("the page you requested has an exception. ");
}
}
}
}
// Table color change
Function onchangtrcolor (event ){
VaR E = event | window. event;
VaR OBJ = e.tar GET | E. srcelement;
OBJ. parentnode. style. backgroundcolor = tobecolor;
OBJ. style. backgroundcolor = tobecolor;
VaR inputs = obj. parentnode. parentnode. getelementsbytagname ("input ");
For (VAR I = 0; I <inputs. length; I ++ ){
Inputs [I]. style. backgroundcolor = tobecolor;
Inputs [I]. parentnode. style. backgroundcolor = tobecolor;
}
}
Function outchangtrcolor (event ){
VaR E = event | window. event;
VaR OBJ = e.tar GET | E. srcelement;
OBJ. parentnode. style. backgroundcolor = backcolor;
OBJ. style. backgroundcolor = backcolor;
VaR inputs = obj. parentnode. parentnode. getelementsbytagname ("input ");
For (VAR I = 0; I <inputs. length; I ++ ){
Inputs [I]. style. backgroundcolor = backcolor;
Inputs [I]. parentnode. style. backgroundcolor = backcolor;
}
}
// Copy the selected
Function copyselect (){
VaR checkboxs = Document. getelementsbyname ("checkbox ");
For (VAR I = 0; I <checkboxs. length; I ++ ){
If (checkboxs [I]. Checked = true ){
Checkboxs [I]. Checked = false;
Copytr (checkboxs [I]);
Checkboxs [I]. Checked = true;
}
}
Actionfill ();
}
Function copytr (OBJ ){
VaR tbody = Document. getelementbyid ("tbdata"). getelementsbytagname ("tbody") [0];
VaR STR = obj. parentnode. parentnode;
VaR TR = Str. clonenode (true );
Tbody. appendchild (TR );
}
// Delete the selected
Function delselect (){
VaR checkboxs = Document. getelementsbyname ("checkbox ");
VaR TR = table. getelementsbytagname ("TR ");
For (VAR I = 0; I <checkboxs. length; I ++ ){
If (tr. Length = 2 ){
Checkboxs [I]. Checked = false;
Return;
}
If (checkboxs [I]. Checked = true ){
Removetr (checkboxs [I]);
I =-1;
}
}
}
Function removetr (OBJ ){
VaR STR = obj. parentnode. parentnode;
Str. parentnode. removechild (STR );
}
// Select all
Function selectall (){
VaR checkboxs = Document. getelementsbyname ("checkbox ");
VaR mark = true;
For (VAR I = 0; I <checkboxs. length; I ++ ){
If (checkboxs [I]. Checked = false) {mark = false}
}
If (Mark ){
For (VAR I = 0; I <checkboxs. length; I ++ ){
Checkboxs [I]. Checked = false;
}
} Else {
For (VAR I = 0; I <checkboxs. length; I ++ ){
Checkboxs [I]. Checked = true;
}
}
}
// Mouse focus
Function readyedit (event ){
VaR E = event | window. event;
VaR OBJ = e.tar GET | E. srcelement;
OBJ. Select ();
}
// Clear
Function allclear (){
VaR inputs = tbody. getelementsbytagname ("input ");
For (VAR I = 0; I <inputs. length; I ++ ){
Inputs [I]. value = "";
}
}
// Delete all
Function alldel (){
VaR TRS = tbody. getelementsbytagname ("TR ");
// Alert (TRS. Length );
For (VAR I = 1; I <= TRS. length; I ++ ){
If (typeof (TRs [I])! = "Undefined "){
Tbody. removechild (TRs [I]);
I = 0;
}
}
}
// Keyboard Events
Function beginlisten (){
If (document. addeventlistener ){
Document. addeventlistener ("keydown", keydown, true );
} Else {
Document. attachevent ("onkeydown", keydown );
}
}
Function stoplisten (){
If (document. removeeventlistener ){
Document. removeeventlistener ("keydown", keydown, true );
} Else {
Document. detachevent ("onkeydown", keydown );
}
}
// Handle Keyboard Events
Function keydown (event ){
VaR E = event | window. event;
If (E. keycode = 45) {addtr ()}
If (E. keycode = 46) {deltr ()}
}
// Add a table
Function addtr (){
VaR STR = tbody. getelementsbytagname ("TR") [0];
VaR TR = Str. clonenode (true );
Tbody. appendchild (TR );
Actionfill ();
}
// Delete a table
Function deltr (){
VaR TR = table. getelementsbytagname ("TR ");
If (tr. Length = 2) {return ;}
VaR lasttr = tr [tr. Length-1];
Lasttr. parentnode. removechild (lasttr );
}
// Move the focus
Function gonext (event ){
VaR E = event | window. event;
VaR OBJ = e.tar GET | E. srcelement;
If (E. keycode = 13 ){
VaR nextobj = obj. parentnode. parentnode. nextsibling;
VaR objindex = obj. parentnode. cellindex;
If (nextobj ){
If (nextobj. nodetype = 3 ){
VaR nextinput = nextobj. nextsibling. getelementsbytagname ("input") [objindex];
Nextinput. Focus ();
Nextinput. Select ();
} Else {
VaR nextinput = nextobj. getelementsbytagname ("input") [objindex];
Nextinput. Focus ();
Nextinput. Select ();
}
}
}
}
// Automatic Filling
VaR currentobj;
Function showdiv (event ){
VaR E = event | window. event;
VaR OBJ = e.tar GET | E. srcelement;
VaR EX = E. clientx;
VaR ey = E. clienty;
VaR Sy = Document. Body. parentnode. scrolltop;
VaR DY = ey + Sy;
VaR divshowinput = Document. getelementbyid ("divshowinput ");
Divshowinput. style. Top = Dy + "PX ";
Divshowinput. style. Left = ex + "PX ";
Divshowinput. style. Display = "Block ";
Hidelisten ();
Currentobj = OBJ;
/// Smart menu ////
Fixmenu ();
// Determine the focus position
VaR tdorder = obj. parentnode. cellindex;
// Fill in the Title
VaR tdtitletr = Document. getelementbyid ("tbdata"). getelementsbytagname ("TR") [0];
VaR tdtitle = tdtitletr. getelementsbytagname ("TD") [tdorder];
Document. getelementbyid ("bartitle"). innerhtml = tdtitle. innerhtml;
// Collect table information // judge duplicate
VaR TRS = obj. parentnode. getelementsbytagname ("TR ");
VaR autofillp = Document. getelementbyid ("autofillp ");
VaR bankm = true;
For (VAR I = 0; I <TRS. length; I ++ ){
VaR inputvalue = TRS [I]. getelementsbytagname ("TD") [tdorder]. getelementsbytagname ("input") [0]. value;
If (inputvalue! = ""){
Bankm = false;
VaR menus = autofillp. getelementsbytagname ("");
If (menus. length> 0 ){
VaR belivem = true;
For (var j = 0; j <menus. length; j ++ ){
If (menus [J]. firstchild. nodevalue = inputvalue ){
Belivem = false;
}
}
If (belivem ){
VaR svalue = Document. createelement ("");
Svalue. setattribute ("href", "javascript: void 0 ");
Svalue. onclick = function () {fillinput (this )};
VaR stext = Document. createtextnode (inputvalue );
Svalue. appendchild (stext );
Autofillp. appendchild (svalue );
}
} Else {
VaR svalue = Document. createelement ("");
Svalue. setattribute ("href", "javascript: void 0 ");
Svalue. onclick = function () {fillinput (this )};
VaR stext = Document. createtextnode (inputvalue );
Svalue. appendchild (stext );
Autofillp. appendchild (svalue );
}
}
}
If (bankm ){
VaR svalue = Document. createelement ("");
Svalue. setattribute ("href", "javascript: void 0 ");
VaR stext = Document. createtextnode ("Empty data ");
Svalue. appendchild (stext );
Autofillp. appendchild (svalue );
}
}
Function fillinput (OBJ ){
Currentobj. value = obj. innerhtml;
Divshowinput. style. Display = "NONE ";
}
Function clearinput (){
Currentobj. value = "";
Divshowinput. style. Display = "NONE ";
}
Function hidediv (){
Divshowinput. style. Display = "NONE ";
Stophide ();
}
Function hidelisten (){
If (document. addeventlistener ){
Document. addeventlistener ("click", hidediv, true );
} Else {
Document. attachevent ("onclick", hidediv );
}
}
Function stophide (){
If (document. removeeventlistener ){
Document. removeeventlistener ("click", keydown, true );
} Else {
Document. detachevent ("onclick", keydown );
}
}
// Delete existing data from the smart menu
Function fixmenu (){
VaR autofillp = Document. getelementbyid ("autofillp ");
VaR values = autofillp. getelementsbytagname ("");
For (VAR I = values. Length-1; I> = 0; I --){
Autofillp. removechild (Values [I]);
}
}
Function senddata (){
VaR divfoltupdiv = Document. getelementbyid ("divfoltupdiv ");
Divfoltupdiv. style. Display = "Block ";
VaR sendokinf = Document. getelementbyid ("sendokinf ");
VaR sendokbiginf = Document. getelementbyid ("sendokbiginf ");
VaR sendname = new array ();
VaR TRS = tbody. getelementsbytagname ("TR ");
VaR inputnames = TRS [0]. getelementsbytagname ("input ");
For (VAR I = 0; I <inputnames. Length-1; I ++ ){
Sendname [I] = inputnames [I + 1]. getattribute ("name ");
}
VaR trnum = TRS. length;
VaR oknum = 0;
For (VAR I = 0; I <trnum; I ++ ){
VaR values = TRS [I]. getelementsbytagname ("input ");
VaR poststringary = new array ();
For (var j = 0; j <values. Length-1; j ++ ){
Poststringary [J] = sendname [J] + "=" + values [J + 1]. value;
}
VaR poststring = poststringary. Join ("&");
Function sendok (revdata ){
If (revdata = "OK "){
Oknum ++;
Sendokinf. innerhtml = "successfully sent" + oknum + "row total" + trnum + "row ";
Sendokbiginf. innerhtml = trnum-oknum;
If (trnum-oknum = 0 ){
Divfoltupdiv. style. Display = "NONE ";
Allclear ();
Alldel ();
}
}
}
VaR sendajax = new Ajax ("isave. asp", 0, poststring, sendok );
Sendajax. Post ();
}
}
// -->
</SCRIPT>
<Style type = text/CSS> body {
Font-size: 12px; font-family: Arial, Helvetica, sans-serif; Background-color: # e9edf7
}
# Tbbackground {
Background-color: # ffffff; text-align: Center
}
# Tbdata {
Background-color: # dde3ec
}
# Tbdata TD {
Background-color: # ffffff
}
# Tbdata input {
Width: 50px; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: None
}
# Tbdata. checkbox {
Width: 15px
}
# Tbdata thead {
}
# Tbtopopt {
Border-Right: #999999 1px solid; padding-Right: 5px; border-top: #999999 1px solid; display: block; padding-left: 5px; padding-bottom: 5px; border-left: #999999 1px solid; width: 80px; color: #000000; padding-top: 5px; border-bottom: #999999 1px solid; Background-color: # f8f9fc; text-Decoration: None
}
# Tbtopopt A: hover {
Background-color: # dde3ec
}
# Tbbomopt {
Border-Right: #999999 1px solid; padding-Right: 5px; border-top: #999999 1px solid; display: block; padding-left: 5px; padding-bottom: 5px; border-left: #999999 1px solid; width: 80px; color: #000000; padding-top: 5px; border-bottom: #999999 1px solid; Background-color: # f8f9fc; text-Decoration: None
}
# Tbbomopt A: hover {
Background-color: # dde3ec
}
# Tbdata {
Color: #000000; text-Decoration: None
}
# Divshowinput {
Border-Right: # dde3ec 1px solid; border-top: # dde3ec 1px solid; display: none; Z-INDEX: 10; left: 350px; overflow: hidden; border-left: # dde3ec 1px solid; width: 100px; border-bottom: # dde3ec 1px solid; position: absolute; top: 30px; Background-color: # f8f9fc
}
# Divshowinput {
Display: block; width: auto; color: #000000; Background-color: # f8f9fc; text-align: center; text-Decoration: None
}
# Divshowinput A: hover {
Border-Right: # ff0000 2px solid; border-left: # ff0000 2px solid; color: # ff0000; Background-color: # dde3ec
}
# Divshowinput P {
Padding-Right: 0px; padding-left: 0px; border-bottom-color: # dde3ec; padding-bottom: 0px; margin: 0px; padding-top: 0px; background-color: # f8f9fc; text-align: center; border-bottom-style: double
}
# Divfoltupdiv {
Display: none; Z-INDEX: 1001; Right: 0px; filter: progid: DXImageTransform. microsoft. alphaimageloader (Enabled = true, sizingmethod = scale, src?'gb.png '); left: 0px; padding-bottom: 300px; width: 100%; bottom: 0px; padding-top: 270px; position: absolute; top: 0px; text-align: Center
}
Unknown {
Background-image: url(gb.png); background-repeat: Repeat
}
P # sendokbiginf {
Font-size: 20px; color: red
}
</Style>
<Meta content = "mshtml 6.00.2800.1400" name = generator>
<Body>
<Div id = divfoltupdiv>
<P> send data </P>
<P id = sendokbiginf> </P>
<P id = sendokinf> </P> </div>
<Table id = tbbackground cellspacing = 0 cellpadding = 0 width = 760 align = center
Border = 0>
<Tbody>
<Tr>
<TD> </tr>
<Tr>
<TD>
<Table id = tbdata cellspacing = 1 cellpadding = 0 width = 750 align = center
Border = 0>
<Thead>
<Tr>
<TD Height = 25> <a id = bt_selectall> select all </a> </TD>
<TD> A1 </TD>
<TD> A2 </TD>
<TD> A3 </TD>
<TD> A4 </TD>
<TD> A5 </TD>
<TD> A6 </TD>
<TD> A7 </TD>
<TD> A8 </TD>
<TD> A9 </TD>
<TD> A10 </TD>
<TD> A11 </TD> </tr> </thead>
<Tbody>
<Tr>
<TD> <input class = checkbox type = checkbox value = checkbox
Name = checkbox> </TD>
<TD> <input name = C1> </TD>
<TD> <input name = c2> </TD>
<TD> <input name = C3> </TD>
<TD> <input name = C4> </TD>
<TD> <input name = C5> </TD>
<TD> <input name = C6> </TD>
<TD> <input name = C7> </TD>
<TD> <input name = C8> </TD>
<TD> <input name = C9> </TD>
<TD> <input name = C10> </TD>
<TD> <input name = C11> </TD>
</Tr>
</Tbody>
</Table>
</TD>
</Tr>
<Tr>
<TD>
<Table id = tbbomopt cellspacing = 0 cellpadding = 0 width = 700 align = center
Border = 0>
<Tbody>
<Tr>
<TD width = 125 Height = 40> <a id = bt_copyselect> copy selected </a> </TD>
<TD width = 537> <a id = bt_delselect> Delete selected </a> </TD>
<TD width = 537> <a id = bt_allclear> clear all </a> </TD>
<TD width = 537> <a id = bt_senddata> submit data </a> </TD>
<TD width = 38> </TD>
</Tr>
</Tbody>
</Table>
</TD>
</Tr>
</Tbody>
</Table>
</Body>
</Html>