JS Dynamic Add/Remove TR method to table

Source: Internet
Author: User
This article introduces JS dynamic to table Add/Remove TR method, the need for friends can refer to the copy code code as follows:


<! 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)].document; 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].document); if (!foundobj && document.getElementById) foundobj = document.getElementById (theobj); return foundobj;


}


//Add a participant to fill in the line


function Addsignrow () {//reads the line number of the last line, 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= '/> '";


//Add column: E-mail


var Newemailtd=newtr.insertcell (2);


//Add column content


newemailtd.innerhtml = "<input name= ' Txtemail" + RowID + "' id= ' txtemail" + RowID + "' type= ' text ' size= '"/&gt ;";


//Add column: Phone


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= ' '/> ';





//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 ' The href= ' # '" + RowID + "')" > Delete </a&gt ;</div> ";


//Push line number to the next line


Txttrlastindex.value = (RowID + 1). ToString ();


}


//delete specified line


function Deletesignrow (rowid) {


var signframe = findobj ("Signframe", document);


var signitem = findobj (rowid,document);


//Gets the index
of the row that will be deleted

var rowIndex = Signitem.rowindex;


//Deletes the row of the specified index


Signframe.deleterow (RowIndex);


//Reorder sequence number, if no serial number, this step omitted


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;


//Loop delete line, delete from last line


for (i=rowscount-1;i > 0; i--) {


Signframe.deleterow (i);


}


//Reset last line number is 1


var txttrlastindex = findobj ("Txttrlastindex", document);


Txttrlastindex.value = "1";


//Pre-add line


Addsignrow ();


}


}


</script>


</HEAD>


<BODY>


<div>


<table width= "613" border= "0" cellpadding= "2" cellspacing= "1" id= "Signframe" >


<tr id= "Trheader" >


<td width= "a" bgcolor= "#96E0E2" > Serial number </td>


<td width= bgcolor= "#96E0E2" > User name </td>


<td width= bgcolor= "#96E0E2" > E-mail </td>


<td width= bgcolor= "#96E0E2" > Fixed telephone </td>


<td width= bgcolor= "#96E0E2" > Mobile phone </td>


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


<td width= align= "center" bgcolor= "#96E0E2" > </td>


</tr>


</table>


</div>


<div>


<input type= "button" Name= "Submit" value= "Add participants"/>


<input type= "button" Name= "Submit2" value= "Empty"/>


<input name= ' txttrlastindex ' type= ' hidden ' id= txttrlastindex ' value= '/> ' 1 '


</div>


</BODY>


</HTML>

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.