Convert JavaScript to dynamically Add rows to the table (tr)

Last Update:2018-12-05 Source: Internet

Author: User

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

<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<Meta name = "Generator" CONTENT = "EditPlus">

<Meta name = "Author" CONTENT = "">

<Meta name = "Keywords" CONTENT = "">

<Meta name = "Description" CONTENT = "">

<Script language = "javascript"> // Example: obj = findObj ("image1 ");

Function findObj (theObj, theDoc)

{

Var p, I, foundObj;

If (! TheDoc) theDoc = document;

If (p = theObj. indexOf ("? ")> 0 & parent. frames. length)

{ TheDoc = parent.frames[theobj.substring(p%1%].doc ument; TheObj = theObj. substring (0, p);} if (! (FoundObj = theDoc [theObj]) & theDoc. all) foundObj = theDoc. all [theObj]; for (I = 0 ;! FoundObj & I <theDoc. forms. length; I ++) FoundObj = theDoc. forms [I] [theObj]; for (I = 0 ;! FoundObj & theDoc. layers & I <theDoc. layers. length; I ++) FoundObj = findobj(theobj,thedoc.layers? I =.doc ument); if (! FoundObj & document. getElementById) foundObj = document. getElementById (theObj ); Return foundObj;

}

// Add a participant Field

Function AddSignRow () {// read the row number of the last row, which is stored in the txtTRLastIndex text box.

Var txtTRLastIndex = findObj ("txtTRLastIndex", document );

Var rowID = parseInt (txtTRLastIndex. value );

Var signFrame = findObj ("SignFrame", document );

// Add rows

Var newTR = signFrame. insertRow (signFrame. rows. length );

NewTR. id = "SignItem" + rowID;

// Add a column: Sequence Number

Var newNameTD = newTR. insertCell (0 );

// Add column content

NewNameTD. innerHTML = newTR. rowIndex. toString ();

// Add a column: Name

Var newNameTD = newTR. insertCell (1 );

// Add column content

NewNameTD. innerHTML = "<input name = 'txtname" + rowID + "'id = 'txtname" + rowID + "'Type = 'text' size = '12'/> ";

// Add a column: Email

Var newEmailTD = newTR. insertCell (2 );

// Add column content

NewEmailTD. innerHTML = "<input name = 'txtemail" + rowID + "'id = 'txtemail" + rowID + "'Type = 'text' size = '20'/> ";

// Add column: phone number

Var newTelTD = newTR. insertCell (3 );

// Add column content

NewTelTD. innerHTML = "<input name = 'txttel" + rowID + "'id = 'txttel" + rowID + "'Type = 'text' size = '10'/> ";

// Add column: Mobile Phone

Var newMobileTD = newTR. insertCell (4 );

// Add column content

NewMobileTD. innerHTML = "<input name = 'txtmobile" + rowID + "'id = 'txtmobile" + rowID + "'Type = 'text' size = '12'/> ";

// Add column: Company Name

Var newCompanyTD = newTR. insertCell (5 );

// Add column content

NewCompanyTD. innerHTML = "<input name = 'txtcompany" + rowID + "'id = 'txtcompany" + rowID + "'Type = 'text' size = '20'/> ";

// Add column: delete button

Var newDeleteTD = newTR. insertCell (6 );

// Add column content

NewDeleteTD. innerHTML = "<div align = 'center' style = 'width: 40px '> <a href = 'javascript :; 'onclick = \ "DeleteSignRow ('signitem" + rowID + "') \"> Delete </a> </div> ";

// Push the row number to the next row

TxtTRLastIndex. value = (rowID + 1). toString ();

}

// Delete a specified row

Function DeleteSignRow (rowid ){

Var signFrame = findObj ("SignFrame", document );

Var signItem = findObj (rowid, document );

// Obtain the Index of the row to be deleted

Var rowIndex = signItem. rowIndex;

// Delete the row of the specified Index

SignFrame. deleteRow (rowIndex );

// Rearrange the sequence number. If no sequence number exists, this step is omitted.

For (I = rowIndex; I <signFrame. rows. length; I ++ ){

SignFrame. rows [I]. cells [0]. innerHTML = I. toString ();

}

} // Clear the list

Function ClearAllSign (){

If (confirm ('Are you sure you want to clear all participants? ')){

Var signFrame = findObj ("SignFrame", document );

Var rowscount = signFrame. rows. length;

// Delete rows cyclically from the last row

For (I = rowscount-1; I> 0; I --){

SignFrame. deleteRow (I );

}

// Reset the last row number to 1

Var txtTRLastIndex = findObj ("txtTRLastIndex", document );

TxtTRLastIndex. value = "1 ";

// Pre-Add a row

AddSignRow ();

}

}

</Script>

</HEAD>

<BODY>

<Div>

<Table width = "613" border = "0" cellpadding = "2" cellspacing = "1" id = "SignFrame">

             <Tr id = "trHeader">

               <Td width = "27" bgcolor = "#96E0E2"> NO. </td>

               <Td width = "64" bgcolor = "#96E0E2"> User Name </td>

               <Td width = "98" bgcolor = "#96E0E2"> email </td>

               <Td width = "92" bgcolor = "#96E0E2"> landline phone </td>

               <Td width = "86" bgcolor = "#96E0E2"> mobile phone </td>

               <Td width = "153" bgcolor = "#96E0E2"> company name </td>

               <Td width = "57" align = "center" bgcolor = "#96E0E2"> & nbsp; </td>

             </Tr>

       </Table>

  </Div>

  <Div>

       <Input type = "button" name = "Submit" value = "add participant" onclick = "AddSignRow ()"/>

    <Input type = "button" name = "Submit2" value = "clear" onclick = "ClearAllSign ()"/>

    <Input name = 'txttrlastindex' type = 'den den 'id = 'txttrlastindex' value = "1"/>

  </Div>

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

Convert JavaScript to dynamically Add rows to the table (tr)

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support