<! 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>
<Title> </title>
<Script language = "javascript" type = "text/javascript">
Function addRow (){
Var newTR = document. getElementById ("testTable"). insertRow (document. getElementById ("testTable"). rows. length );
Var newNameTD = newTR. insertCell (0 );
NewNameTD. innerHTML = "aa ";
Var newNameTD = newTR. insertCell (1 );
NewNameTD. innerHTML = "<input name = 'lastname' id = 'lastname' type = 'text'/> ";
Var newNameTD = newTR. insertCell (2 );
NewNameTD. innerHTML = "<input name = 'birthday' id = 'birthday' type = 'text'/> ";
Var newNameTD = newTR. insertCell (3 );
NewNameTD. innerHTML = "<input name = 'age' id = 'age' type = 'text'/> ";
}
Function insertRow (){
Var oTable = document. getElementById ("table_info ");
Var oTr = oTable. insertRow ();
Var oTd = oTr. insertCell ();
OTd. innerHTML = "adding a new line ";
}
Function insertRow2 (){
// Obtain the table object
Var table = document. getElementById ("table_info2 ");
// Find the td for which you want to add the button. The first column in the table is used as an example.
Var oTd = table. rows [0]. cells [0];
// Add a button to td. Clear the td content and grant the code to the button before adding the button.
OTd. innerHTML = "<button onclick = 'insertrow22 () '> Add fees </button> ";
}
Function insertRow22 (){
Var oTable = document. getElementById ("table_info2 ");
Var oTr = oTable. insertRow ();
Var oTd = oTr. insertCell ();
OTd. innerHTML = "adding a new line ";
}
Function insertRow3 (){
// Obtain the table object
Var table = document. getElementById ("table_info3 ");
// Find the td for which you want to add the button. The first column in the table is used as an example.
Var oTd2 = table. rows [0]. insertCell ();
OTd2.innerHTML = "& nbps ;";
}
Function tableDiv (){
Var maxRow = 4;
Var maxCol = 8;
Var strTbody = ["<table border = '1'> <tbody>"];
For (var I = 0; I <maxRow; I ++ ){
StrTbody. push ("<tr> ");
For (var j = 0; j <maxCol; j ++ ){
StrTbody. push ("<td> test </td> ");
}
StrTbody. push ("</tr> ");
}
StrTbody. push ("</tbody> </table> ");
Var obj = document. getElementById ("tableDiv ");
Obj. innerHTML = strTbody. join ("");
}
Function init (){
Var _ table, _ tbody, tr, td, text, maxRow, maxCol;
Var docBody = document. body;
Var _ doc = document;
MaxRow = 5;
MaxCol = 8;
_ Table = _ doc. createElement ("table ");
_ Table. border = "1 ";
_ Table. style. tableLayout = "fixed ";
_ Tbody = _ doc. createElement ("tbody ");
_ Table. insertBefore (_ tbody, null );
DocBody. insertBefore (_ table, null );
For (var I = 0; I <maxRow; I ++ ){
Tr = _ doc. createElement ("tr ");
_ Tbody. insertBefore (tr, null );
For (var j = 0; j <maxCol; j ++ ){
Td = _ doc. createElement ("td ");
Text = _ doc. createTextNode ("Text ");
Td. insertBefore (text, null );
Tr. insertBefore (td, null );
}
}
}
</Script>
</Head>
<Body>
<Div>
<Table id = "testTable" border = '1' cellspacing = "1">
<Tr>
<Th>
FirstName
</Th>
<Th>
LastName
</Th>
<Th>
BirthDay
</Th>
<Th>
Age
</Th>
</Tr>
<Tr>
<Td>
Jim
</Td>
<Td>
Green
</Td>
<Td>
L.A
</Td>
<Td>
23
</Td>
</Tr>
<Tr>
<Td>
Andrew
</Td>
<Td>
Hou
</Td>
<Td>
Si'an
</Td>
<Td>
25
</Td>
</Tr>
</Table>
<Input type = "button" id = "aaa" value = "+ add new Row" onclick = "addRow ();"/>
</Div>
<Br/>
<Hr/>
<Br/>
<Div>
<Input type = "button" value = "button to add a row" onclick = "insertRow ();"/>
<Table id = "table_info" border = "1">
<Tr>
<Th>
Name
</Th>
<Th>
Age
</Th>
</Tr>
</Table>
</Div>
<Br/>
<Hr/>
<Br/>
<Div>
<Input type = "button" value = "button to add a line" onclick = "insertRow2 ();"/>
<Table id = "table_info2" border = "1">
<Tr>
<Th>
Name
</Th>
<Th>
Age
</Th>
</Tr>
</Table>
</Div>
<Br/>
<Hr/>
<Br/>
<Div>
<Input type = "button" value = "adding columns consecutively" onclick = "insertRow3 ();"/>
<Table id = "table_info3" border = "1">
<Tr>
<Th>
Name
</Th>
<Th>
Age
</Th>
</Tr>
</Table>
</Div>
<Br/>
<Hr/>
<Br/>
<Div>
<Input type = "button" value = "add a table" onclick = "tableDiv ();"/>
<Div id = "tableDiv"/>
</Div>
<Br/>
<Hr/>
<Br/>
<Div>
<Input type = "button" value = "Add table consecutively" onclick = "init ();"/>
</Div>
</Body>
</Html>