insertar un div

[Japrendo]

Amigos necesito una idea..

Tengo una tabla en JSP, y quiero que cuando le de click sobre un registro se despliegue una tabla para mostrar el detalle inmediatamente abajo del registro clickeado...es decir insertar un DIV y dentro de ese div presentar una tabla..

El problema es que inserto el div pero no se como ubicarlo debajo del registro clickeado...el crea el div cuando termina la tabla.
aqui el codigo..agradezco sus aportes :

Código Java:

<table id='tablaDetalle' class="tListaFuncs" border="0">
            <tr>
                <th>ID Asesor</th>
                <th>Nombre Asesor</th>
                <th>Agrupacion Ramos</th>
                <th>Ramo/Producto</th>
                <th>Fecha Mvto</th>
                <th>Horario</th>
                <th>Poliza</th>
                <th>Valor Mvto</th>
            </tr>    
            <%
            for (int i=0;i<DetLiq.size();i++){
               %>
               <tr>
               <td onmouseover="fncPuntero(this);" onclick="fncCreaDiv();"><%=DetLiq.get(i).getCampo3()%></td>
               <td><%=DetLiq.get(i).getDesc3()%></td>
               <td><%=DetLiq.get(i).getDesc4()%></td>
               <td><%=DetLiq.get(i).getCampo4()%></td>
               <td><%=DetLiq.get(i).getFec2()%></td>
               <td><%=DetLiq.get(i).getDesc5()%></td>
               <td><%=DetLiq.get(i).getDesc6()%></td>
               <td class="tdValor" text-align:right><%=fmt.format(DetLiq.get(i).getCampo5())%></td>
               
               </tr>
               <%   
                total=total+DetLiq.get(i).getCampo5();
            }    
            %>
            <tr>
               <td style=" text-align: right; font-weight: 700;color: darkolivegreen; background: #FAFAFA; font-family: serif; font-size: 13px " colspan='7'>Total</td>    
               <td style="font-weight: 700;color: darkolivegreen; background: #FAFAFA; font-family: serif; font-size: 13px; text-align:  right "><%=fmt.format(total)%></td>
            </tr>
        </table>
 

la funcion es esta :

Código Javascript:

function fncCreaDiv(){
               alert("xxx");
              var iDiv = document.createElement('div');
              iDiv.id = 'block';
              iDiv.className = 'block';
              iDiv.innerHTML="xxxx";
               alert("1");
              document.getElementById('tablaDetalle').appendChild(iDiv);
              
               alert("2");
              var element =  document.getElementById("block");
              var fragment_url = "sgvReporteDetalle2.jsp";
               alert("3");
              peticion.open("GET", fragment_url); peticion.onreadystatechange =           function(){
              if (peticion.readyState === 4){element.innerHTML = peticion.responseText;}
              };peticion.send(null);
           }
 

[Alexis88]

Como pretendes insertar una tabla debajo de cualquier fila de otra, podrías tener una fila vacía por cada fila de la tabla inicial en la cual mostrarías al contenido de la respuesta; pero creo que se vería mejor si mostraras el resultado en una ventana modal.

[Japrendo]

Gracias Alexis88, claro esa es la forma facil...pero la tabla que estoy publicando ya esta en una ventana flotante...entonces ventana flotante de ventana flotante no se ve bien...necesito insertar esa tabla dentro de un div dentro de la tabla padre debajo del registro clickeado

[Alexis88]

Como te dije, podrías tener una fila "fantasma" debajo de cada fila, y que ocupe la misma cantidad de columnas que la fila superior, en la cual mostrarías a la tabla de detalles.