Ajax dynamic table. You can add, delete, and copy rows in a timely manner.

Last Update:2014-07-29 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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">

<Head>

<Title> Shijiazhuang retractable door </title>

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 {

}

# 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>

<Body>

<Table id = tbbackground cellspacing = 0 cellpadding = 0 width = 760 align = center

Border = 0>

<Tbody>

<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>

<Tbody>

<Tr>

<TD> <input class = checkbox type = checkbox value = checkbox

Name = checkbox> </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>

</Tr>

</Tbody>

</Table>

</TD>

</Tr>

</Tbody>

</Table>

</Body>

</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Ajax dynamic table. You can add, delete, and copy rows in a timely manner.

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Ajax dynamic table. You can add, delete, and copy rows in a timely manner.

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support