Mostrar contenido de una fila en otra tabla

[dilan_snoopy]

Saludos a la comunidad

resulta en un datatable muestro un listado de ciertos item's con sus atributos y estos se pueden editar hasta ahí todo bien (tabla general por asi decirlo), pero a su vez cada item tiene otro listado de item's con atributos que pueden ser modificados se puede decir que son sub-item's, entonces mi duda esta es en como podria yo visualizar los sub-item's de un item de la tabla general, en otra tabla; no se si pueda hacerlo debajo del item ahi mismo en la tabla general o si cuando haga clic en un item me carge otra tabla con los sub-items que tiene el item al que se hizo clic

por si esta confuso xD

item-1 ---->sub- item-1.1
sub- item-1.2
sub- item-1.3

item-2 ----> sub- item-2.1
sub- item-2.2
sub- item-2.3

item-3 ----> sub- item-3.1
sub- item-3.2
sub- item-3.3

entonces los item's 1,2 y 3 son de la tabla general pero los sub-item's son los que quiero visualizar cuando se de clic sobre su item padre pero no se como seria lo ideal si debajo de su item padre en la tabla general o en otra tabla nueva para ser editados tambien porque acá http://www.datatables.net/examples/api/row_details.html el ejemplo solo muestra una sub-informacion, se podria hacer algo pero para que se edite
Nota: en mi caso yo tengo un data table con conferencias pero cada conferencia tiene una cantidad de ponencias y pues tanto conferencias como ponencias sus atributos pueden ser modificados por ello busco como visualizar las ponencias lo mejor y comodo posible por que es info a leer de la BD

gracias y espero hacerme entender

[Alexis88]

Podrías tener dos filas para cada ítem, en una iría el ítem y sus opciones de edición y, en la segunda, los sub-ítems, organizados dentro de otra tabla. Esta segunda fila estaría oculta y tendría un identificador único, de este modo, en la primera fila, tendrías un botón que, al pulsarlo, ejecutaría una función en la cual tomarías a la fila de abajo mediante el identificador que le hayas asignado y, según sea su estado de visibilidad, la muestres u ocultes.

Código HTML:

<table>
    <thead>
        <tr>
            <th>ÍTEM</th>
            <th>OPCIONES</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ítem 1</td>
            <td>
                <button onclick = "mostrarOcultar('id_1')">Mostrar/Ocultar</button>
            </td>
        </tr>
        <tr class = "oculta" id = "id_1">
            <td colspan = "2">
                <table>
                    <thead>
                        <tr>
                            <th>SUB-ÍTEM</th>
                            <th>OPCIONES</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Sub-ítem 1</td>
                            <td>
                                <button>Editar</button>
                            </td>
                        </tr>
                        <tr>
                            <td>Sub-ítem 2</td>
                            <td>
                                <button>Editar</button>
                            </td>
                        </tr>    
                        <tr>
                            <td>Sub-ítem 3</td>
                            <td>
                                <button>Editar</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>Ítem 2</td>
            <td>
                <button onclick = "mostrarOcultar('id_2')">Mostrar/Ocultar</button>
            </td>
        </tr>
        <tr class = "oculta" id = "id_2">
            <td colspan = "2">
                <table>
                    <thead>
                        <tr>
                            <th>SUB-ÍTEM</th>
                            <th>OPCIONES</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Sub-ítem 4</td>
                            <td>
                                <button>Editar</button>
                            </td>
                        </tr>
                        <tr>
                            <td>Sub-ítem 5</td>
                            <td>
                                <button>Editar</button>
                            </td>
                        </tr>
                        <tr>
                            <td>Sub-ítem 6</td>
                            <td>
                                <button>Editar</button>
                            </td>
                        </tr>    
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
 

Código CSS:

.oculta{
    display: none;
}
 

Código Javascript:

function mostrarOcultar(id){
    var fila = document.getElementById(id);
 
    if (getComputedStyle(fila).display == "none"){
        fila.style.display = "table-row";
    }
    else{
        fila.style.display = "none";
    }
}
 

DEMO

Saludos