Как скрыть / отобразить набор HTML строк таблицы при нажатии на некоторые другие строки таблицы родного брата? - PullRequest
Новая
       90

Как скрыть / отобразить набор HTML строк таблицы при нажатии на некоторые другие строки таблицы родного брата?

0 голосов
/ 25 февраля 2020

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

Я собираю файл HTML, в котором отображаются результаты испытаний. Результаты тестов показаны в строках: 

<tr>
    <th class="test_name_row" colspan="5">Test: spc-aes-gcm-decrypt</th>
</tr>
<tr>
    <td class="subtest_name_col">Subtest 1</td>
    <td class="neutral_metric">2880</td>
    <td class="good_metric">2880</td>
    <td class="neutral_metric">0</td>
</tr>
<tr>
    <td class="subtest_name_col">Subtest 2</td>
    <td class="neutral_metric">2880</td>
    <td class="good_metric">2880</td>
    <td class="neutral_metric">0</td>
</tr>

Мне нужно следующее поведение: если пользователь нажимает на «test_name_row», две строки таблицы ниже свернутся / развернутся, возможно, с некоторыми гладкая анимация.

Какая лучшая стратегия для достижения этой цели?

1 Ответ

0 голосов
/ 26 февраля 2020

Мое решение:

HTML

        <tr>
            <th class="test_name_row" colspan="5" onclick="hideShow()">Test: spc-aes-gcm-decrypt</th>
        </tr>
        <tr id="row1">
            <td class="subtest_name_col">Subtest 1</td>
            <td class="neutral_metric">2880</td>
            <td class="good_metric">2880</td>
            <td class="neutral_metric">0</td>
        </tr>
        <tr id="row2">
            <td class="subtest_name_col">Subtest 2</td>
            <td class="neutral_metric">2880</td>
            <td class="good_metric">2880</td>
            <td class="neutral_metric">0</td>
        </tr>

Javascript

        var hidden = false;
        function hideShow() {
            if (hidden == true) {
                //show
                document.getElementById("row1").classList.remove("hidden");
                document.getElementById("row2").classList.remove("hidden");
                document.getElementById("row1").classList.add("visible");
                document.getElementById("row2").classList.add("visible");
                hidden = false;
            } else {
                //hide
                document.getElementById("row1").classList.add("hidden");
                document.getElementById("row2").classList.add("hidden");
                document.getElementById("row1").classList.remove("visible");
                document.getElementById("row2").classList.remove("visible");
                hidden = true;
            }
        }

CSS

        .hidden {
            opacity: 0;
            transition: 0.5s;
        }
        .visible {
            opacity: 1;
            transition: 0.5s;
        }

Если вы не хотите использовать анимацию, вы можете удалить эти классы (как из CSS, так и JS) и просто использовать 

.style.display = "none"

в javascript.

То же, что и фрагмент: 

var hidden = false;
function hideShow() {
    if (hidden == true) {
        //show
        document.getElementById("row1").classList.remove("hidden");
        document.getElementById("row2").classList.remove("hidden");
        document.getElementById("row1").classList.add("visible");
        document.getElementById("row2").classList.add("visible");
        hidden = false;
    } else {
        //hide
        document.getElementById("row1").classList.add("hidden");
        document.getElementById("row2").classList.add("hidden");
        document.getElementById("row1").classList.remove("visible");
        document.getElementById("row2").classList.remove("visible");
        hidden = true;
    }
}
.hidden {
    opacity: 0;
    transition: 0.5s;
}
.visible {
    opacity: 1;
    transition: 0.5s;
}
<table>
        <tr>
        <th class="test_name_row" colspan="5" onclick="hideShow()">Test: spc-aes-gcm-decrypt</th>
    </tr>
    <tr id="row1">
        <td class="subtest_name_col">Subtest 1</td>
        <td class="neutral_metric">2880</td>
        <td class="good_metric">2880</td>
        <td class="neutral_metric">0</td>
    </tr>
    <tr id="row2">
        <td class="subtest_name_col">Subtest 2</td>
        <td class="neutral_metric">2880</td>
        <td class="good_metric">2880</td>
        <td class="neutral_metric">0</td>
    </tr>
</table>

РЕДАКТИРОВАТЬ: добавлен один пропущенный ряд

...