使用 CSS 和 JS 的 HTML 可折疊表格部分

Question

所有這些都是與我的實際代碼相同的示例代碼。 只是更短。 我試圖讓表格的子部分關閉主要標題部分。 所以，當你第一次進入頁面時，它看起來像這樣：帶有主標題和內容的表格折疊起來

然后，當您單擊標題時，我希望它打開時帶有子標題並且它們的內容已折疊： Table Headers clicked with table subheaders collapsed

然后您可以點擊副標題打開實際內容：點擊表格副標題並顯示數據

到目前為止，我可以關閉主要的標題部分。 我只是不知道如何在您單擊主標題時保持子標題折疊。

這是我的 .html：

<!DOCTYPE HTML>
<html>
    <head>
        <style> 
            .parent {cursor: pointer; background-color: rgba(234, 118, 86, 1.0);}
            .parent ~ .child {display: none;}
            .open .parent ~ .child {display: table-row;}
            table {border-radius: 5px; margin-bottom: 2em;}
            th {border: solid black; font-size: 28px; border-radius: 10px;}
            td {border: solid black; font-size: 23px; border-radius: 5px; padding: .5em; background-color: rgba(234, 118, 86, 1.0);}
        </style>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
        <script src="table.js"></script>
    </head>
    
    <body>
        <table>
            <tbody>
            <tr class="parent"><th colspan="3">Table Section 1</th></tr>
                <tr class="child"><th colspan="3">Table Subsection 1</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Lorem</td><td>Ipsum</td><td>Dolor</td></tr>
                    <tr class="child"><td>Sit</td><td>Amet</td><td>Consectetur</td></tr>
                    
                <tr class="child"><th colspan="3">Table Subsection 2</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Adipiscing</td><td>Elit</td><td>Sed</td></tr>
                    <tr class="child"><td>Do</td><td>Eiusmod</td><td>Tempor</td></tr>
            </tbody>
            <tbody>
            <tr class="parent"><th colspan="3">Table Section 2</th></tr>
                <tr class="child"><th colspan="3">Table Subsection 1</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Incididunt</td><td>Ut</td><td>Labore</td></tr>
                    <tr class="child"><td>Et</td><td>Dolore</td><td>Magna</td></tr>
                    
                <tr class="child"><th colspan="3">Table Subsection 2</th></tr>
                    <tr class="child"><th>Name</th><th>Age</th><th>City</th></tr>
                    <tr class="child"><td>Aliqua</td><td>Ut</td><td>Enim</td></tr>
                    <tr class="child"><td>Quis</td><td>Nostrud</td><td>Exercitation</td></tr>
            </tbody>
        </table>
    </body>
</html>

我的 .js 文件：

$(document).ready(function() {
    $('table').on('click', 'tr.parent', function() {
        $(this).closest('tbody').toggleClass('open');
    });
}); // end ready

我試過對 tbody 標簽和類似 parent2 的東西使用相同的代碼，但它立即變得不穩定。 任何人都有任何好的資源來幫助我或知道如何讓子標題崩潰？

Answer 1

你可以使用 JQuery 的 nextUntil()：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!DOCTYPE HTML> <html> <head> <style> .parent {cursor: pointer; background-color: rgba(234, 118, 86, 1.0);} .parent ~ .child, .parent ~ .child2 {display: none;} .open .parent ~ .child, .child2.open {display: table-row;} table {border-radius: 5px; margin-bottom: 2em;} th {border: solid black; font-size: 28px; border-radius: 10px;} td {border: solid black; font-size: 23px; border-radius: 5px; padding: .5em; background-color: rgba(234, 118, 86, 1.0);} </style> <script> $(document).ready(function() { $('table').on('click', 'tr.parent', function() { $(this).closest('tbody').toggleClass('open'); }); $('table').on('click', 'tr.child', function() { $(this).nextUntil('.child').toggleClass('open'); }); }); </script> </head> <body> <table> <tbody> <tr class="parent"><th colspan="3">Table Section 1</th></tr> <tr class="child"><th colspan="3">Table Subsection 1</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Lorem</td><td>Ipsum</td><td>Dolor</td></tr> <tr class="child2"><td>Sit</td><td>Amet</td><td>Consectetur</td></tr> <tr class="child"><th colspan="3">Table Subsection 2</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Adipiscing</td><td>Elit</td><td>Sed</td></tr> <tr class="child2"><td>Do</td><td>Eiusmod</td><td>Tempor</td></tr> </tbody> <tbody> <tr class="parent"><th colspan="3">Table Section 2</th></tr> <tr class="child"><th colspan="3">Table Subsection 1</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Incididunt</td><td>Ut</td><td>Labore</td></tr> <tr class="child2"><td>Et</td><td>Dolore</td><td>Magna</td></tr> <tr class="child"><th colspan="3">Table Subsection 2</th></tr> <tr class="child2"><th>Name</th><th>Age</th><th>City</th></tr> <tr class="child2"><td>Aliqua</td><td>Ut</td><td>Enim</td></tr> <tr class="child2"><td>Quis</td><td>Nostrud</td><td>Exercitation</td></tr> </tbody> </table> </body> </html>

使用 CSS 和 JS 的 HTML 可折疊表格部分

問題描述

1 個解決方案

解決方案1
1 2020-09-28 09:07:11

使用 CSS 和 JS 的 HTML 可折疊表格部分

問題描述

1 個解決方案

解決方案1 1 2020-09-28 09:07:11

解決方案1
1 2020-09-28 09:07:11