Me gustaría tener una tabla en la que algunas de las filas incluyan otras tablas. Mi archivo html es como:

HTML: actualizado después de las respuestas

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <h2>Cell that spans two tables:</h2>
    <table>
        <tr>
            <th>Name:</th>
            <td>Rows including tables</td>
        </tr>
        <tr>
            <th rowspan="4">Telephone:</th>
            <td>row1 of first table</td>
        </tr>
        <tr class="yellow">
            <td>
                <div class='yellowTable'>
                    <input name="yelInput" type="checkbox" class="toggle"/>
                    <label>
                        <span class='expand' id="mouse">
                            <span class="changeArrow arrow-up">-</span>
                            <span class="changeArrow arrow-dn">+</span>
                            row2 of first table
                        </span>
                    </label>
                    <div class="fieldsetContainer">
                        <table class="secondtable">
                            <tr>
                                <td>
                                    20:00
                                </td>
                                <td>
                                    hello world first table
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    21:00
                                </td>
                                <td>
                                    hello world second table
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>row3 of first table</td>
        </tr>
        <tr class="yellow">
            <td>
                <div class='yellowTable'>
                    <input name="yelInput" type="checkbox" class="toggle"/>
                    <label>
                        <span class='expand' id="mouse">
                            <span class="changeArrow arrow-up">-</span>
                            <span class="changeArrow arrow-dn">+</span>
                            row2 of first table
                        </span>
                    </label>
                    <div class="fieldsetContainer">
                        <table class="secondtable">
                            <tr>
                                <td>
                                    20:00
                                </td>
                                <td>
                                    hello world first table
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    21:00
                                </td>
                                <td>
                                    hello world second table
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="red">
            <td>
                <div class='redTable'>
                    <input name="redInput" type="checkbox" class="toggle"/>
                    <label>
                        <span class='expand' id="mouse">
                            <span class="changeArrow arrow-up">-</span>
                            <span class="changeArrow arrow-dn">+</span>
                            row2 of first table
                        </span>
                    </label>
                    <div class="fieldsetContainer">
                        <table class="secondtable">
                            <tr>
                                <td>
                                    20:00
                                </td>
                                <td>
                                    hello world first table
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    21:00
                                </td>
                                <td>
                                    hello world second table
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

</html>

CSS:

#mouse { cursor: pointer; }

.fieldsetContainer { height: 0;overflow: hidden;transition: height 400ms linear; }

#toggle { display: none; }

#toggle:checked~.fieldsetContainer { height: auto; }

label .arrow-dn { display: inline-block; }

label .arrow-up { display: none; }

#toggle:checked~label .arrow-dn { display: none; }

#toggle:checked~label .arrow-up { display: inline-block; }

Pero el problema es que el segundo colapso no funciona, hace colapsar la segunda primera fila en lugar de la segunda.

Busqué en Internet sobre el problema, pero fallé. ¿Cómo podría manejar el problema?

Por cierto, he agregado el código completo aquí en jsfiddle.

Actualización:

Muchas gracias por sus excelentes respuestas. Bueno, como mencionaste, debería cambiar los atributos id y for de <label>, que deberían ser únicos. Pero no hay problema porque tengo miles de esas tablas y no pude hacerlo manualmente. Me pregunto si puede hacerme saber si podría hacerlo sistemáticamente a través de CSS o JS. Los agregaré al archivo XSLT. ¡Gracias de nuevo por tus comentarios!

Aquí hay algunas líneas del archivo xslt, relacionadas con el punto principal.

<tr class="yellow">
    <td>
        <div id="yellowTable">
            <input name="yelInput" type="checkbox" class="toggle"/> 
            <label>
                <span class='expand' id="mouse"> 
                    <span class="chnageSymbol expand-Negative">-</span>
                    <span class="chnageSymbol collapse-Positive">+</span>
                      <div> row2 of first table </div>
                </span>
            </label>
            <div  class="fieldsetContainer">
                <table class="secondtable" id="secondtable">
..............................

<tr class="red">
    <td>
        <div id="redTable">
            <input name="redInput" type="checkbox" class="toggle"/> 
            <label>
                <span class='expand' id="mouse"> 
                    <span class="chnageSymbol expand-Negative">-</span>
                    <span class="chnageSymbol collapse-Positive">+</span>
                      <div> row2 of first table </div>
                </span>
            </label>
            <div  class="fieldsetContainer">
                <table class="secondtable" id="secondtable">
..............................

(He eliminado las etiquetas finales por guardar una pregunta larga).

Actualización2:

Adjunto código JavaScript para asignar id 's y atributo for como he mencionado anteriormente.

JS :

function assignIdAndForAttribute()
{
    var redTable= document.getElementById("redTable");
    var redInputTag = redTable.getElementsByTagName("input");
    var redLabelTag = redTable.getElementsByTagName("label");
    //<![CDATA[
    for (var i = 0; i < tableError.length; i++) {
       redInputTag [i].setAttribute("id", 'toggleRed' + i);
       redLabelTag [i].setAttribute("for", 'toggleRed' + i);
    }
    //]]>

    var yellowTable = document.getElementById("detailedTable");
    var yellowInputTag = yellowTable.getElementsByTagName("input");
    var yellowLabelTag = yellowTable.getElementsByTagName("label");
    //<![CDATA[
    for (var i = 0; i < tableWarning.length; i++) {
       yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
       yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
    }
    //]]>
}
-3
Royeh 26 feb. 2018 a las 00:31

3 respuestas

La mejor respuesta

Ha establecido dos identificadores que son "alternar" y ambas etiquetas para "alternar". Cámbialos a otra cosa:

    <input type="checkbox" class="toggle" id="toggle2"/>

Demo

1
Vega 25 feb. 2018 a las 21:41

Para lograr el resultado esperado, use la siguiente opción

  1. Use la misma clase en lugar de la misma identificación para alternar (ya que la identificación debe ser única)
  2. Use Opacity: 0 en lugar de display: none (ya que no estará disponible en DOM para eventos)

Html:

 <input type="checkbox" class="toggle" />

Css:

.toggle {
   opacity:0
}

.toggle:checked~.fieldsetContainer {
   height: auto;
}
.toggle:checked~label .arrow-dn {
   display: none;
}

.toggle:checked~label .arrow-up {
   display: inline-block;
}

https://jsfiddle.net/Nagasai_Aytha/juoy75rg/84/

0
Naga Sai A 25 feb. 2018 a las 22:02

El error se debe al hecho de que está utilizando identificadores que se supone que son únicos. Si cambia la palanca a una clase en lugar de id, y actualiza su CSS de #toggle a .toggle, casi lo tendrá.

Si no oculta los elementos input.toggle en ese punto, verá que funciona bien.

El atributo de las etiquetas 'for también deberá actualizarse para que pueda interactuar con la etiqueta cuando limpie la entrada. Simplemente use una identificación única en cada palanca para colocarla en el atributo for de la etiqueta y use una clase de estilo y funcionalidad.

2
JasonB 25 feb. 2018 a las 21:41