JS Implementation table Add line TR, delete line tr, empty line tr Simple example

JS Implementation table Add line TR, delete line tr, empty line tr Simple example _javascript tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags tagname

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

The

looks like this:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document &L t;/title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta NAME= "Key Words "content=" "> <meta name=" Description "content=" "> <script language=" javascript ">//example:obj = f 
Indobj ("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)].d  ocument; 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,thedo C.layers[i].document); if (!foundobj && document.getElementById) Foundobj = document.getElementById (theobj); 
return foundobj; //Add a participant fill in the Line function Addsignrow () {//Read the last line number, stored in the Txttrlastindex text box var txttrlastindex = findobj ("Txttrlastindex", 
Document); 
 
var RowID = parseint (Txttrlastindex.value); 
var signframe = findobj ("Signframe", document); 
Add row var newtr = Signframe.insertrow (signFrame.rows.length); 
 
Newtr.id = "Signitem" + RowID; 
Add column: Ordinal var newnametd=newtr.insertcell (0); 
 
Add column content newnametd.innerhtml = newTR.rowIndex.toString (); 
Add column: Name var newnametd=newtr.insertcell (1); Add column content newnametd.innerhtml = "<input name= ' txtname" + RowID + "' id= ' txtname" + RowID + "' type= ' text ' size= '"/&gt 
 
;"; 
Add Column: E-mail box var Newemailtd=newtr.insertcell (2); Add column content newemailtd.innerhtml = "<input name= ' Txtemail" + RowID + "' id= ' txtemail" + RowID + "' type= ' text ' size= ' 20 '/ 
 
> "; 
Add column: Telephone var newteltd=newtr.insertcell (3); Add column content newteltd.innerhtml = "<input name= ' Txttel" + RowID + "' id=' Txttel ' + RowID + "' type= ' text ' size= '/>"; 
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= 
 
 
'/> '; 
Add Column: Delete button var Newdeletetd=newtr.insertcell (6); Add column content newdeletetd.innerhtml = "<div align= ' center ' style= ' width:40px ' ><a ' javascript:; ' href=" 
 
Deletesignrow (' Signitem "+ RowID +" ') \ "> Delete </a></div>"; 
Push the line number to the next line Txttrlastindex.value = (RowID + 1). ToString (); 
}//delete specified row function Deletesignrow (rowid) {var signframe = findobj ("Signframe", document); 
var Signitem = findobj (rowid,document); 
alert (ROWID); 
 
Gets the index var rowIndex = Signitem.rowindex of the row that will be deleted; 
 
Deletes the row signframe.deleterow (rowIndex) of the specified index; Rearrange the ordinal number, if there is no ordinal, this step provinceSlightly for (i=rowindex;i<signframe.rows.length;i++) {signframe.rows[i].cells[0].innerhtml = I.toString (); }//Empty list function clearallsign () {if (confirm) (' OK to empty all participants? 
') {var signframe = findobj ("Signframe", document); 
 
var rowscount = signFrame.rows.length; 
Loops Delete Row, deletes the for (i=rowscount-1;i > 0; i--) {Signframe.deleterow (i) from the last line; 
//Reset last line number is 1 var txttrlastindex = findobj ("Txttrlastindex", document); 
 
Txttrlastindex.value = "1"; 
Pre-add a row of Addsignrow (); } </script> </HEAD> <BODY> <div> <table width= "613" border= "0" cellpadding= "2" cellsp acing= "1" id= "Signframe" > <tr id= "Trheader" > <td width= "a" bgcolor= "#96E0E2" > Serial number </td&gt 
        ; 
        &LT;TD width= "bgcolor=" "#96E0E2" > User name </td> <td width= "" bgcolor= "#96E0E2" > E-mail </td> &LT;TD width= "bgcolor=" "#96E0E2" > Fixed telephone </td> <td width= "" "Bgcolor=" #96E0E2 "> Mobile phone &LT;/TD&G 
        T &LT;TD widTh= "153" bgcolor= "#96E0E2" > Company name </td> <td width= "a" align= "center" bgcolor= "#96E0E2" > </td> </tr> </table> </div> <div> <input type= "button" Name= "Submit" value= "Tim 
   Add participant "onclick=" Addsignrow () "/> <input type=" button "Name=" Submit2 "value=" Empty "onclick=" clearallsign () "/> <input name= ' txttrlastindex ' type= ' hidden ' id= ' ' Txttrlastindex ' value= ' 1 '/> </div> </BODY>  ;/html>

Deleting a row is better than the following method ...

The above is a small series for everyone to bring the JS implementation table Add line TR, delete line tr, clear line tr Simple example of all the content, I hope that we support cloud-Habitat Community ~

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