1. Dynamic Operation of a table:
<Html>
<Head>
<Title> dynamically operate rows in a table </title>
</Head>
<Body>
<Table border = "0" width = "681" bgcolor = "#709EC0" cellSpacing = 1
CellPadding = 3 id = "DemoTable">
<Tr>
<Td width = "35" bgcolor = "# a4c2e8" align = "center">
<B> serial number </B>
</Td>
<Td width = "377" bgcolor = "# a4c2e8" align = "center">
<B> content </B>
</Td>
<Td clospan = '2' width = "143" bgcolor = "# a4c2e8" align = "center"
Colspan = "2">
<B> degree </B>
</Td>
<Td width = "96" bgcolor = "# a4c2e8" align = "center">
<B> select </B>
</Td>
</Tr>
<Tr>
<Td bgcolor = "# FFFFFF" width = "35" align = "center">
1
</Td>
<Td bgcolor = "# FFFFFF" width = "377" align = "center">
<Input name = "neirong" type = "text" size = "50" style = "float: left">
</Td>
<Td bgcolor = "# FFFFFF" width = "71" align = "center">
<Input type = "radio" name = "chengdu1" value = "Major">
Major
</Td>
<Td bgcolor = "# FFFFFF" width = "65" align = "center">
<Input type = "radio" name = "chengdu1" value = "general" checked>
Average
</Td>
<Td bgcolor = "# FFFFFF" width = "96" align = "center">
<Input type = "checkbox" name = "zhenggaizhuangtai">
</Td>
</Tr>
<Tr>
<Td bgcolor = "# FFFFFF" width = "35" align = "center">
2
</TD>
<TD bgcolor = "# ffffff" width = "377" align = "center">
<Input name = "neirong" type = "text" size = "50" style = "float: Left">
</TD>
<TD bgcolor = "# ffffff" width = "71" align = "center">
<Input type = "radio" name = "chengdu2" value = "Major">
Major
</TD>
<TD bgcolor = "# ffffff" width = "65" align = "center">
<Input type = "radio" name = "chengdu2" value = "general" checked>
Average
</Td>
<Td bgcolor = "# FFFFFF" width = "96" align = "center">
<Input type = "checkbox" name = "zhenggaizhuangtai" value = "0">
</Td>
</Tr>
<Tr>
<Td bgcolor = "# FFFFFF" width = "35" align = "center">
3
</Td>
<Td bgcolor = "# FFFFFF" width = "377" align = "center">
<Input name = "neirong" type = "text" size = "50" style = "float: left">
</Td>
<Td bgcolor = "# FFFFFF" width = "71" align = "center">
<Input type = "radio" name = "chengdu3" value = "Major">
Major
</Td>
<Td bgcolor = "# FFFFFF" width = "65" align = "center">
<Input type = "radio" name = "chengdu3" value = "general" checked>
Average
</Td>
<Td bgcolor = "# FFFFFF" width = "96" align = "center">
<Input type = "checkbox" name = "zhenggaizhuangtai">
</Td>
</Tr>
</Table>
<Div>
<P>
& Nbsp;
<A href = "#" onclick = "addRow ();"> Add more </a>
<A href = "#" onclick = "deleteObj ();"> Delete </a>
<Div>
</Body>
</Html>
<Script type = "text/javascript">
Var index = 3;
Var tableObj = document. getElementById ('demotable ');
Function addRow ()
{
Id = parseInt (index) + 1;
// Add rows and attributes
Var newTr = tableObj. insertRow ();
NewTr. id = id;
NewTr. bgColor = "# FFFFFF ";
NewTr. align = "center ";
// Add columns and attributes
Var newTd0 = newTr. insertCell ();
Var newTd1 = newTr. insertCell ();
Var newTd2 = newTr. insertCell ();
Var newTd3 = newTr. insertCell ();
Var newTd4 = newTr. insertCell ();
NewTd0.innerText = parseInt (index) + 1;
NewTd1.innerHTML = "<input name = 'neirong 'size = '50' style = 'float: left'> ";
NewTd2.innerHTML = "<input type = 'Radio 'name = '" + id + "'value = 'weight'> Major ";
NewTd3.innerHTML = "<input type = 'Radio 'name ='" + id + "'value = 'General' checked> General ";
NewTd4.innerHTML = "<input type = 'checkbox' name = 'zhenggaizhuangtai" + id + "'> ";
Index ++;
}
Function deleteObj (){
// If the last row of the table is reached, it cannot be deleted.
If (tableObj. rows. length = 1 ){
Alert ("prompt: the last row of the table has been reached and cannot be deleted! ");
Return false;
}
TableObj. deleteRow (-1 );
-- Index;
}
</Script>
2. traverse the first object of each column in the table
Function parse (){
Var tableObj = document. getElementById ("demoTab ");
Var hiddenStr = "";
For (I = 1; I <tableObj. rows. length; I ++ ){
Var trs = tableObj. rows [I];
// Traverse the first object in each column of each row
For (j = 1; j <trs. cells. length; j ++ ){
Var td = trs. cells [j];
If (td. childNodes [0]. type = 'text ')
{
.....
} Else if (td. childNodes [0]. type = 'Radio '){
.....
} Else if (td. childNodes [0]. type = 'checkbox '){
.....
}
}
HiddenStr + = "...";
}
// Put the processed result into a hidden domain
HiddenObj = document. createElement ("<input type = 'den den 'name = 'hiddenstrval'> ");
HiddenObj. value = hiddenStr;
PaichaInfo. appendChild (hiddenObj );
}