Mostrar contenido de una fila en otra tabla

[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