Я хотел бы иметь таблицу, в которую некоторые строки включают другие таблицы. Мой html файл выглядит так:

HTML: обновляется после ответов

<!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; }

Но проблема в том, что второе свертывание не работает, оно заставляет сворачиваться второй первый ряд, а не второй.

Я искал в интернете проблему, но потерпел неудачу. Как я мог справиться с проблемой?

Кстати, я добавил полный код здесь в jsfiddle.

< Сильный > Update :

Большое спасибо за ваши отличные ответы. Как вы упомянули, я должен изменить id и for атрибут <label>, которые должны быть уникальными. Но проблема не в том, что у меня есть тысячи таких таблиц, и тогда я не мог сделать это вручную. Интересно, пожалуйста, дайте мне знать, могу ли я делать это систематически через CSS или JS. Я добавлю их в файл XSLT. Я могу еще раз большое спасибо за ваши комментарии!

Вот несколько строк из файла xslt, относящихся к основному вопросу.

<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">
..............................

(Я удалил конечные теги из-за сохранения длинного вопроса.)

< Сильный > Update2 :

Я прилагаю код JavaScript для назначения id и атрибута for, как я упоминал выше.

< Сильный > 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 Фев 2018 в 00:31

3 ответа

Лучший ответ

Вы установили два идентификатора «toggle» и оба ярлыка для «toggle». Замените их на что-то другое:

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

DEMO

1
Vega 25 Фев 2018 в 21:41

Для достижения ожидаемого результата используйте опцию ниже

  1. Используйте тот же класс вместо того же идентификатора для переключения (так как идентификатор должен быть уникальным)
  2. Используйте Opacity: 0 вместо display: none (так как оно не будет доступно в DOM для событий)

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 Фев 2018 в 22:02

Ошибка связана с тем, что вы используете идентификаторы, которые должны быть уникальными. Если вы переключите тумблер на класс вместо id и обновите свой css с #toggle на .toggle, у вас это почти получится.

Если вы не скроете элементы input.toggle в этот момент, вы увидите, что они работают нормально.

Атрибут метки for также необходимо обновить, чтобы вы могли взаимодействовать с меткой, когда вы скрываете ввод. Просто используйте уникальный идентификатор для каждого переключателя, чтобы поместить его в атрибут for метки, и используйте класс для стиля и функциональности.

2
JasonB 25 Фев 2018 в 21:41