The following code adds or deletes a table row by controlling nodes on the Internet: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<SCRIPT type = "text/JavaScript">
// Add a row to the table
Function addtablerow (){
VaR Table1 = Document. getelementbyid ('table1 ');
VaR clonetab = Document. getelementbyid ('table2 ');
// Alert (clonetab. firstchild. firstchild. innerhtml );
// Alert (clonetab. firstchild. firstchild. clonenode (true). innerhtml );
Table1.firstchild. appendchild (clonetab. firstchild. firstchild. clonenode (true )); VaR v = table1.firstchild. childnodes;
VaR Len = V. length;
For (VAR I = 1; I <Len; I ++ ){
V [I]. childnodes [0]. firstchild. ID = I; // assign a value to the ID of the first cell.
}
} // Delete a row from the table
Function deltablerow (){
VaR Table1 = Document. getelementbyid ('table1 ');
VaR ischecked = Document. getelementsbyname ('ischecked ');
VaR Len = ischecked. length;
For (VAR I = len-1; I> = 0; I --){
If (ischecked [I]. Checked = true ){
Table1.firstchild. removechild (ischecked [I]. parentnode. parentnode );
// Alert (ischecked [I]. ID );
// Alert (ischecked [I]. parentnode. parentnode. innerhtml );
}
}
}
</SCRIPT>
</Head> <Body> <! -- Display table -->
<Table border = "0" cellpadding = "0" cellspacing = "0" class = "datalist" id = "Table1">
<Tr>
<TH width = "38" nowrap = "nowrap" style = "width: 5%"> 0 </Th>
<TH width = "38" nowrap = "nowrap"> 00 </Th>
<TH width = "79" nowrap = "nowrap" Scope = "col"> 1 </Th>
<TH width = "70" nowrap = "nowrap" Scope = "col"> 2 </Th>
<TH width = "69" nowrap = "nowrap" Scope = "col"> 3 </Th>
<TH width = "66" nowrap = "nowrap" Scope = "col"> 4 </Th>
<TH width = "94" nowrap = "nowrap" Scope = "col"> 5 </Th>
<TH width = "107" nowrap = "nowrap" Scope = "col"> 6 </Th>
</Tr>
</Table> <! -- Control the table button -->
<Table>
<Tr align = "center">
<TD colspan = "10">
<Input type = "button" value = "added" onclick = "addtablerow ();"/>
<Input type = "button" value = "delete" onclick = "deltablerow ();"/>
</TD>
</Tr>
</Table> <! -- The template table is also called clone table style = "display: none" -->
<Table id = 'table2' style = "display: none">
<Tr>
<TH> <input type = "checkbox" name = "ischecked"/> <input type = "hidden" size = "6" value = ""/> </Th>
<TH width = "38" nowrap = "nowrap" style = "width: 5% "> <input type =" text "size =" 16 "maxlength =" 50 "value =" "/> </Th>
<TH width = "79" nowrap = "nowrap" Scope = "col"> <input type = "text" size = "16" maxlength = "50" value = ""/> </Th>
<TH width = "70" nowrap = "nowrap" Scope = "col"> <input type = "text" size = "6" maxlength = "10" value = ""/> </Th>
<TH width = "69" nowrap = "nowrap" Scope = "col">
<Select size = "1">
<Option value = ""> Select... </option>
<Option value = "1"> 1 </option>
<Option value = "2"> 1 </option>
</SELECT>
</Th>
<TD width = "100" nowrap = "nowrap" Scope = "col"> <input type = "text" class = "date150"/> </TD>
<TH width = "94" nowrap = "nowrap" Scope = "col"> <input type = "text" size = "16" maxlength = "50" value = ""/> </Th>
<TH width = "71" nowrap = "nowrap" Scope = "col"> <input type = "text" size = "16" maxlength = "50" value = ""/> </Th>
</Tr>
</Table> </Body>
</Html> Because I use Div + CSS, I changed the above Code to the following: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> untitled document </title>
<Style type = "text/CSS">
. Box_quantity_box {width: 250px;
Border: 1px solid #7a4e25;
Font-size: 12px;
}
. Box_quantity_top {Background: #7a4e25;
Color: # fefdfb;
Width: 100%;
Height: 30px;
}
. Box_quantity_con {width: 100%;
Background: # fef0e5;
Height: 50px;
}
. Box_quantity_ul {list-style: none;
Margin: 0px;
Padding: 0px;
Clear: both;
} . Box_quantity_li1 {float: left;
Width: 60px;
Margin: 8px 0px 0px 0px;
Padding: 0px;
Text-align: center; }
. Box_quantity_li2 {float: left;
Width: 30px;
Margin: 8px 0px 0px 0px;
Padding: 0px;
Text-align: center; }
. Txt1 {width: 55px;
Background: # fef0e5;
Border: 1px solid #7a4e25;
Height: 15px;
Font-size: 12px;
Color: #7a4e25; }
. Selecsty1 {width: 50px;
Background: # fef0e5;
Border: 1px solid #7a4e25;
Height: 15px;
Font-size: 12px;
Color: #7a4e25; }
. Singlesty {Background: # fef0e5;
Color: #7a4e25;
}
. Close {clear: Both ;}
. Box_quantity_button {
Border: 1px solid #7a4e25;
Width: 47px;
Height: 17px;
Background: # fefdfb;
Color: #7a4e25;
Cursor: pointer;
}
</Style>
<SCRIPT type = "text/JavaScript">
// Add a row to the table
Function addtablerow (){
VaR Table1 = Document. getelementbyid ('table1 ');
VaR clonetab = Document. getelementbyid ('table2 ');
Alert (clonetab. firstchild. firstchild. innerhtml );
Alert (clonetab. firstchild. firstchild. clonenode (true). innerhtml );
/* Table1.firstchild. appendchild (clonetab. firstchild. firstchild. clonenode (true ));*/
Table1.firstchild. appendchild (clonetab. firstchild. clonenode (true ));
VaR v = table1.firstchild. childnodes;
VaR Len = V. length;
For (VAR I = 1; I <Len; I ++ ){
V [I]. childnodes [0]. firstchild. ID = I; // assign a value to the ID of the first cell.
}
} // Delete a row from the table
Function deltablerow (){
VaR Table1 = Document. getelementbyid ('table1 ');
VaR ischecked = Document. getelementsbyname ('ischecked ');
VaR Len = ischecked. length;
For (VAR I = len-1; I> = 0; I --){
If (ischecked [I]. Checked = true ){
Table1.firstchild. removechild (ischecked [I]. parentnode. parentnode );
// Alert (ischecked [I]. ID );
// Alert (ischecked [I]. parentnode. parentnode. innerhtml );
}
}
}
</SCRIPT> </Head> <Body>
<Div class = "box_quantity_box">
<Div class = "box_quantity_top">
<Ul class = "box_quantity_ul">
<Li class = "box_quantity_li2"> & nbsp; Operation </LI>
<Li class = "box_quantity_li1"> Haha 1 </LI>
<Li class = "box_quantity_li1"> Haha 2 </LI>
<Li class = "box_quantity_li1"> Haha 3 </LI>
<Li class = "box_quantity_li2"> Haha 4 </LI> <Div class = "close"> </div>
</Ul> </Div>
<Div class = "box_quantity_con" id = "Table1">
<Div> </div>
<Div style = "width: 240px; text-align: Right; margin: 5px; padding: 0px;">
<Button class = "box_quantity_button" onclick = "addtablerow ();"> Add </button> & nbsp;
<Button class = "box_quantity_button" onclick = "deltablerow ();"> Delete </button> & nbsp;
</Div> </Div> </Div>
<Div style = "display: none;" id = "Table2">
<Ul class = "box_quantity_ul">
<Li class = "box_quantity_li2">
<Input type = "checkbox" name = "ischecked"/>
</LI>
<Li class = "box_quantity_li1">
<Select class = "selecsty1">
<Option> Haha </option>
<Option> Haha </option>
<Option> La la </option>
</SELECT> </LI>
<Li class = "box_quantity_li1">
<Select class = "selecsty1">
<Option> 1 </option>
<Option> 2 </option>
<Option> 3 </option>
</SELECT>
</LI>
<Li class = "box_quantity_li1"> <input type = "text" class = "txt1"/> </LI>
<Li class = "box_quantity_li2"> <input type = "checkbox"/> </LI> <Div class = "close"> </div>
</Ul>
</Div> </Body>
</Html> |
