How to dynamically create tables, Tr, Td, and assign values in JS

Fruit database modification:
The topic list must change with the result type.
After you query data on the Internet, start the operation. In the result type drop-down box, add the change () event to trigger Dwr and query the topic set-dynamically create/edit a Table.
The Code is as follows:
JS
  Copy codeThe Code is as follows: // Dynamically Retrieve topic data
Function getzts (){
ParentId = document. getElementById ("bselect1"). value;
If (parentId! = ""){
DwrMethod. getZtList (parentId, callback5 );
} Else {
// Clear the data of the topic Table
Var t = document. getElementById ("zhutiTable"); // get Table
Var length = t. rows. length; // obtain the number of rows in the Table.
If (length! = 0) {// clear if there are rows
For (var I = length-1; I> = 0; I --)
{
T. deleteRow (I );
}
}
Var r = t. insertRow ();
Var c = r. insertCell ();
C. innerHTML = "No topic list ";
Document. getElementById ('zhutitable'). appendChild (t );
}
}
Function callback5 (provinces ){
Var t = document. getElementById ("zhutiTable"); // get Table
Var length = t. rows. length; // obtain the number of rows in the Table.
If (length! = 0) {// clear if there are rows
For (var I = length-1; I> = 0; I --)
{
T. deleteRow (I );
}
}
If (provinces. length> 0 ){
For (var I = 0; I <provinces. length; I ++ ){
// Tr
If (I % 4 = 0 ){
Var r = t. insertRow (t. rows. length); // create a new row.
}
// Td
Var c = r. insertCell (); // create a new column
C. innerHTML = "<input type = 'checkbox' name = 'zhutikids' value =" + provinces [I] [0] + ">" + provinces [I] [1];
}
} Else {
Var r = t. insertRow ();
Var c = r. insertCell ();
C. innerHTML = "No topic list ";
}
Document. getElementById ('zhutitable'). appendChild (t );
}

HtmlCopy codeThe Code is as follows: <tr>
<Td class = "add_tit"> result type </td>
<Td>
<S: select id = "bselect1" name = "pruType1" onchange = "getzts (); "list =" pTypeList "listKey =" id "listValue =" productionTypeName "headerKey =" "headerValue =" -- select -- "/>
<Label class = "note4"> * </label>
</Td>
</Tr>
[Html]
<Tr>
<Td class = "add_tit"> topic </td>
<Td id = "table1" style = "padding-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">
<Table id = "zhutiTable" border = "0" cellpadding = "0" cellspacing = "0" width = 100% class = "table_table">
<Tr>
<Td style = "color: red;"> Note: select the result type first </td>
</Tr>
</Table>
</Td>
</Tr>