Ayuda formulario + tabla con Javascript!!

Holas, este es mi primer post y es para pedirles ayuda ya que estoy comenzando con Javascript. Lo que quiero hacer es crear una funcion que cree a partir de cero un formulario organizado mediante una tabla. El problema surge es que al parecer los campos se agregan a la tabla, pero no se agregan al formulario, he intentado varias cosas pero no logro que me resulte.

El código es el siguiente:

Código :

function mostrar_mod_estado() {
   var cuerpo_t_principal = document.getElementById("cuerpo_t_principal");   
   while(cuerpo_t_principal.rows.length > 0) cuerpo_t_principal.deleteRow(0);
   if(!mod_estado_desplegado) {      
      var tr = document.createElement("tr");
      cuerpo_t_principal.appendChild(tr);
      var td = document.createElement("td");
      tr.appendChild(td);
      var div = document.createElement("div");   
      div.setAttribute("style", "width:240px; border:thin solid silver");
      div.align = "center";
      td.appendChild(div);
      var form = document.createElement("form");
      form.id = "form_cambio_estado";
      form.method = "post";
      form.enctype = "multipart/form-data";
      form.action = "Procesa_Cambio_Estado.php";
      div.appendChild(form);
      var tabla = document.createElement("table");
      tabla.width = "100%";
      form.appendChild(tabla);      
      var cuerpo_tabla = document.createElement("tbody");
      cuerpo_tabla.id = "cuerpo_c_estado"; 
      tabla.appendChild(cuerpo_tabla);
      var fila1 = document.createElement("tr");
      var fila2 = document.createElement("tr");
      var fila3 = document.createElement("tr");
      var fila4 = document.createElement("tr");
      var fila5 = document.createElement("tr");
      var fila6 = document.createElement("tr");
      var celda1 = document.createElement("td");
      var celda2 = document.createElement("td");
      var celda3 = document.createElement("td");
      var celda4 = document.createElement("td");
      var celda5 = document.createElement("td");
      var celda6 = document.createElement("td");
      var celda7 = document.createElement("td");
      var celda8 = document.createElement("td");
      celda1.colSpan = "2";
      celda1.align = "center";
      celda1.innerHTML = "<b>Modificar Estado</b>";
      celda2.innerHTML = "Actividad";
      celda3.innerHTML = "&nbsp&nbsp&nbsp&nbsp<input type=\"text\" id=\"tx_tag1\" readonly=\"readonly\" size=\"12\">";
      celda4.innerHTML = "Estado";
      celda5.innerHTML = "&nbsp&nbsp&nbsp&nbsp<input type=\"text\" id=\"tx_estado\" readonly=\"readonly\" size=\"12\">";
      celda6.colSpan = "2";
      celda6.align = "left";
      celda6.innerHTML = "<p>Observacion:</p>";
      celda7.colSpan = "2";
      celda7.align = "left";
      celda7.innerHTML = "<textarea name=\"ta_observ1\" cols=\"25\" rows=\"4\"></textarea>";
      celda8.colSpan = "2";
      celda8.align = "right";
      celda8.innerHTML = "<input type=\"submit\" name=\"cambiar_estado\" value=\"Cambiar estado\"><input type=\"hidden\" name=\"id_actividad1\" id=\"id_actividad1\">";
      
      form.appendChild(celda1);
      form.appendChild(celda2);
      form.appendChild(celda3);
      form.appendChild(celda4);
      form.appendChild(celda5);
      form.appendChild(celda6);
      form.appendChild(celda7);
      form.appendChild(celda8);
      
      fila1.appendChild(form.elements[0]);
      fila2.appendChild(form.elements[1]);
      fila2.appendChild(form.elements[2]);
      fila3.appendChild(form.elements[3]);
      fila3.appendChild(form.elements[4]);
      fila4.appendChild(form.elements[5]);
      fila5.appendChild(form.elements[6]);
      fila6.appendChild(form.elements[7]);*/
      
      cuerpo_t_principal.appendChild(fila1);
      cuerpo_t_principal.appendChild(fila2);
      cuerpo_t_principal.appendChild(fila3);
      cuerpo_t_principal.appendChild(fila4);
      cuerpo_t_principal.appendChild(fila5);
      cuerpo_t_principal.appendChild(fila6);
      filtro_desplegado = false;               
      
      mod_f_term_desplegado = false;
      mod_estado_desplegado = true;
   }
   else mod_estado_desplegado = false;
}

De antemano gracias Saludos.

Modifique tu codigo. Inclui unos ciclos for para acortar el codigo y si te fijas en el ultimo for, veras que ahora las filas se agregan al cuerpo de la tabla que esta dentro del formulario, y no a "cuerpo_t_principal". Me parece que ese era el error que tenias. De todas maneras te recomiendo no utilizar la funcion innerHTML. Espero te sirva, avisanos como te va.

Código :

function mostrar_mod_estado() {
   var cuerpo_t_principal = document.getElementById("cuerpo_t_principal");
   while(cuerpo_t_principal.rows.length > 0) cuerpo_t_principal.deleteRow(0);
   if(!mod_estado_desplegado){
      var tr = document.createElement("tr");
      cuerpo_t_principal.appendChild(tr);
      var td = document.createElement("td");
      tr.appendChild(td);
      var div = document.createElement("div");
      div.setAttribute("style", "width:240px; border:thin solid silver");
      div.align = "center";
      td.appendChild(div);
      var form = document.createElement("form");
      form.id = "form_cambio_estado";
      form.method = "post";
      form.enctype = "multipart/form-data";
      form.action = "Procesa_Cambio_Estado.php";
      div.appendChild(form);
      var tabla = document.createElement("table");
      tabla.width = "100%";
      form.appendChild(tabla);
      var cuerpo_tabla = document.createElement("tbody");
      cuerpo_tabla.id = "cuerpo_c_estado";
      tabla.appendChild(cuerpo_tabla);
      for (i=1, i<7, i++){//Creamos las 6 filas y sus variables
         var fila+i = document.createElement("tr");
      }
      for (i=1, i<9, i++){//Creamos las 8 celdas y sus variables
         var celda+i = document.createElement("td");
      }
      celda1.colSpan = "2";
      celda1.align = "center";
      celda1.innerHTML = "<b>Modificar Estado</b>";
      celda2.innerHTML = "Actividad";
      celda3.innerHTML = "&nbsp&nbsp&nbsp&nbsp<input type=\"text\" id=\"tx_tag1\" readonly=\"readonly\" size=\"12\">";
      celda4.innerHTML = "Estado";
      celda5.innerHTML = "&nbsp&nbsp&nbsp&nbsp<input type=\"text\" id=\"tx_estado\" readonly=\"readonly\" size=\"12\">";
      celda6.colSpan = "2";
      celda6.align = "left";
      celda6.innerHTML = "<p>Observacion:</p>";
      celda7.colSpan = "2";
      celda7.align = "left";
      celda7.innerHTML = "<textarea name=\"ta_observ1\" cols=\"25\" rows=\"4\"></textarea>";
      celda8.colSpan = "2";
      celda8.align = "right";
      celda8.innerHTML = "<input type=\"submit\" name=\"cambiar_estado\" value=\"Cambiar estado\"><input type=\"hidden\" name=\"id_actividad1\" id=\"id_actividad1\">";
      for (i=1, i<9, i++){
         form.appendChild(celda+i);
      }
      
      for (i=0, i<8, i++){
         var u = ++i;
         fila+u.appendChild(form.elements[i]);
      }
      
      for (i=1, i<7, i++){//Agregamos las filas a cuerpo_tabla
         cuerpo_tabla.appendChild(fila+i);
      }
      filtro_desplegado = false;
      
      mod_f_term_desplegado = false;
      mod_estado_desplegado = true;
      }
      else mod_estado_desplegado = false;
}