时间戳

首页 > 解决方案 > 默认情况下如何隐藏可折叠表格（顶行除外）

javascript - 默认情况下如何隐藏可折叠表格（顶行除外）

问题描述

我有以下 html 并且想默认隐藏可折叠表格，只显示第一行。单击它时，将弹出表格的其余部分。现在，它显示整个表格，只有在切换后才隐藏。

<html>

<style>

table { 
    width: 300px; 
    border-collapse: collapse;
    border-color: grey;
    line-height: 1.7;
    }

th { 
    background: #ffffff; 
    color: #000000; 
    font-weight: bold;
    }

td, th { 

    border: 1px solid #ccc; 
    text-align: center; 
    font-size: 14px;
    }

td {
 color: #000000;
 }

.labels tr td {
    font-weight: bold;
    color: #feb330;
}

.label tr td label {
    display: block;
}

.bold {
font-weight: bold;
}


[data-toggle="toggle"] {
    display: none;
}

</style>

<table>

       <tbody class="labels">

        <tr bgcolor="#ffffff">
            <td colspan="3">
            <label for="14Season">2014 Season: 19</label>
                    <input type="checkbox" name="14Season" id="14Season" data-toggle="toggle">
        </tr>

        </tbody>

        <tbody class="hide">

            <tr bgcolor="#264033">
                <td class="bold" colspan="1" style="color:#ffffff">Date</td>
                <td class="bold" colspan="1" style="color:#ffffff">Scorigami</td>
                <td class="bold" colspan="1" style="color:#ffffff">Total</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">9/21/13</td>
                <td style="color:#ffffff">0-6 L</td>
                <td style="color:#ffffff">1</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">9/21/13</td>
                <td style="color:#ffffff">8-10 L</td>
                <td style="color:#ffffff">2</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">9/22/13</td>
                <td style="color:#ffffff">10-8 W</td>
                <td style="color:#ffffff">3</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">10/19/13</td>
                <td style="color:#ffffff">3-2 W</td>
                <td style="color:#ffffff">4</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">10/19/13</td>
                <td style="color:#ffffff">1-4 L</td>
                <td style="color:#ffffff">5</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">10/26/13</td>
                <td style="color:#ffffff">7-0 W</td>
                <td style="color:#ffffff">6</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">4/11/14</td>
                <td style="color:#ffffff">7-2 W</td>
                <td style="color:#ffffff">7</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">4/11/14</td>
                <td style="color:#ffffff">7-1 W</td>
                <td style="color:#ffffff">8</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">4/12/14</td>
                <td style="color:#ffffff">13-6 W</td>
                <td style="color:#ffffff">9</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">4/12/14</td>
                <td style="color:#ffffff">10-2 W</td>
                <td style="color:#ffffff">10</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">4/13/14</td>
                <td style="color:#ffffff">12-0 W</td>
                <td style="color:#ffffff">11</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">4/26/14</td>
                <td style="color:#ffffff">8-2 W</td>
                <td style="color:#ffffff">12</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">4/26/14</td>
                <td style="color:#ffffff">7-5 W</td>
                <td style="color:#ffffff">13</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">4/27/14</td>
                <td style="color:#ffffff">9-1 W</td>
                <td style="color:#ffffff">14</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">5/2/14</td>
                <td style="color:#ffffff">10-0 W</td>
                <td style="color:#ffffff">15</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">5/3/14</td>
                <td style="color:#ffffff">4-2 W</td>
                <td style="color:#ffffff">16</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">5/4/14</td>
                <td style="color:#ffffff">10-4 W</td>
                <td style="color:#ffffff">17</td>
            </tr>

            <tr bgcolor="#264033">
                <td style="color:#ffffff">5/16/14</td>
                <td style="color:#ffffff">1-2 L</td>
                <td style="color:#ffffff">18</td>
            </tr>

            <tr bgcolor="#000000">
                <td style="color:#ffffff">5/17/14</td>
                <td style="color:#ffffff">7-12 L</td>
                <td style="color:#ffffff">19</td>
            </tr>

        </tbody>

</table>

<script>

$(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
});

</script>


</html>

我相信只需要做一个小改动，但似乎无法做到正确。谢谢您的帮助！

标签： javascripthtmlcss

解决方案

你可以给表格行的逻辑ID，然后使用一个函数来隐藏/显示它们

检索表行 ID 的代码

  var table = document.querySelector('table');

  // listen for a click
   table.addEventListener('click', function(ev){
    // get the event targets ID
    var serviceID = ev.target.id;
    alert(serviceID);
})

推荐阅读