I have collected two good js instances to add and delete table row tr instances. For more information, see. I hope this method will help you all.
Example 1
| The Code is as follows: |
Copy code |
<Html>
<Head>
<Title> js insert delete talbe row </title>
<Script type = "text/javascript">
Function inRow ()
{
Var table = document. getElementById ("tid ");
Var nextIndex = table. rows. length
Var nextRow = table. insertRow (nextIndex );
NextRow. insertCell (0). innerHTML = "A" + nextIndex;
NextRow. insertCell (1). innerHTML = "B" + nextIndex;
NextRow. insertCell (2). innerHTML = "C" + nextIndex;
NextRow. insertCell (3). innerHTML = '<a href = "javascript:;" onclick = "return del (this)"> Delete </a> ';
Return false;
}
Function del (obj)
{
Var table = obj. parentNode;
Table. deleteRow (obj. parentNode. parentNode. rowIndex );
}
</Script>
</Head>
<Body>
<Input type = "button" name = "insert" value = "add" onclick = "return inRow ()"/>
<Table border = "1" width = "300" name = "tt" id = "tid">
<Tr>
<Td> A0 </td>
<Td> B0 </td>
<Td> C0 </td>
<Td> <a href = "javascript:;" onclick = "return del (this)"> Delete </a> </td>
</Tr>
<Tr>
<Td> A1 </td>
<Td> B1 </td>
<Td> C1 </td>
<Td> <a href = "javascript:;" onclick = "return del (this)"> Delete </a> </td>
</Tr>
<Tr>
<Td> A2 </td>
<Td> B2 </td>
<Td> C2 </td>
<Td> <a href = "javascript:;" onclick = "return del (this)"> Delete </a> </td>
</Tr>
<Tr>
<Td> A3 </td>
<Td> B3 </td>
<Td> C3 </td>
<Td> <a href = "javascript:;" onclick = "return del (this)"> Delete </a> </td>
</Tr>
</Table>
</Body>
</Html> |
Example 2
| The Code is as follows: |
Copy code |
<! 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 an event 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: Event ID
Var newNameTD = newTR. insertCell (1 );
// Add column content
NewNameTD. innerHTML = "<input name = 'txtname" + rowID + "'id = 'paraid0" + rowID + "'Type = 'text' size = '12'/> ";
// Add a column: Event content
Var newEmailTD = newTR. insertCell (2 );
// Add column content
NewEmailTD. innerHTML = "<input name = 'txtemail" + rowID + "'id = 'paraco 0" + rowID + "'Type = 'text' size = '50'/> ";
// Add column: delete button
Var newDeleteTD = newTR. insertCell (3 );
// 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 = "40" bgcolor = "#96E0E2"> NO. </td>
<Td width = "50" bgcolor = "#96E0E2"> event ID </td>
<Td width = "120" bgcolor = "#96E0E2"> event content </td>
<Td width = "50" align = "center" bgcolor = "#96E0E2"> & nbsp; </td>
</Tr>
</Table>
</Div>
<Div>
<Input type = "button" name = "Submit" value = "add event" onclick = "AddSignRow ()"/>
<Input type = "button" name = "Submit2" value = "Clear event" onclick = "ClearAllSign ()"/>
<Input name = 'txttrlastindex' type = 'den den 'id = 'txttrlastindex' value = "1"/>
</Div>
</BODY>
</HTML> |
