不使用任何 ID 的表中的可折疊行

Question

我創建了一個表，每當用戶單擊該行時，它就會展開下一個隱藏行。 為此，我使用了以下腳本，其中 class row-details的下一個元素被定位為隱藏元素。 這里的問題是使用 id 或 class 來定位行內的每個 div。

如果我使用普通的 div 元素，那么腳本可以使用this.nextElementSibling; 識別下一個可以隱藏的 div 元素，當第一個 div 被點擊時它會展開。

var tableRow = document.getElementsByClassName('row');

for (var i = 0; i < tableRow.length; i++) {
    tableRow[i].addEventListener('click', function () {
        var tableContent = document.querySelector('.row-details');
        if (tableContent.style.maxHeight) {
            tableContent.style.maxHeight = null;
        } else {
            tableContent.style.maxHeight = tableContent.scrollHeight + 'px';
        }
    });
}

在下面的代碼中，有 2 行，每行都有一個包含詳細信息的隱藏行。 我對兩個隱藏行使用了相同的 class。 我想要實現的是在不定義任何 Id 或 class min-height屬性不適用於tr標簽。

 var tableRow = document.getElementsByClassName('row'); for (var i = 0; i < tableRow.length; i++) { tableRow[i].addEventListener('click', function () { var tableContent = this.nextElementSibling; if (tableContent.style.maxHeight) { tableContent.style.maxHeight = null; } else { tableContent.style.maxHeight = tableContent.scrollHeight + 'px'; } }); }

 .row-details{ max-height: 0; overflow: hidden; transition: all 300ms ease; } table { border-collapse: unset; }

 <table> <tr> <th>Date</th> <th>Data-1</th> <th>Data-2</th> </tr> <tr class="row"> <td>Lorem</td> <td>ipsum</td> <td>dolor sit amet.</td> </tr> <tr> <td colspan="3"> <div class="row-details"> <span>Lorem, ipsum.</span> </div> </td> </tr> <tr class="row"> <td>Lorem</td> <td>ipsum</td> <td>dolor sit amet.</td> </tr> <tr> <td colspan="3"> <div class="row-details"> <span>Lorem, ipsum.</span> </div> </td> </tr> </table>

更改代碼：

 const table = document.querySelector('table'); table.addEventListener('click', (e) => { let header_row = e.target.closest('tr.row'); let details_row = header_row.nextElementSibling; details_row.classList.add('show'); var tableContent = document.querySelector('tr.show.row-details'); if (tableContent.style.maxHeight) { tableContent.style.maxHeight = null; details_row.classList.remove('show'); } else { tableContent.style.maxHeight = tableContent.scrollHeight + 'px'; } });

 .row-details { max-height: 0; overflow: hidden; transition: all 300ms ease; } table { border-collapse: unset; } tr.row { cursor: pointer; }

 <table> <tr> <th>Date</th> <th>Data-1</th> <th>Data-2</th> </tr> <tr class="row"> <td>Lorem</td> <td>ipsum</td> <td>dolor sit amet.</td> </tr> <tr> <td colspan="3"> <div class="row-details"> <span>Lorem, ipsum.</span> </div> </td> </tr> <tr class="row"> <td>Lorem</td> <td>ipsum</td> <td>dolor sit amet.</td> </tr> <tr> <td colspan="3"> <div class="row-details"> <span>Lorem, ipsum.</span> </div> </td> </tr> </table>

Answer 1

在這里，我只有一個事件偵聽器用於整個表。 單擊時，我找到最近的tr.row並在nextElementSibling上切換 class 名稱。 使用選擇器，我可以控制<div> 。

如果您使用的是最大高度技術，您可以只放置一個比內容大的最大高度。

 const table = document.querySelector('table'); table.addEventListener('click', e => { let header_row = e.target.closest('tr.row'); let details_row = header_row.nextElementSibling; details_row.classList.toggle('show'); });

 .row-details { max-height: 0; overflow: hidden; transition: all 300ms ease; } tr.show.row-details { max-height: 3em; } table { border-collapse: unset; } tr.row { cursor: pointer; }

 <table> <tr> <th>Date</th> <th>Data-1</th> <th>Data-2</th> </tr> <tr class="row"> <td>Lorem</td> <td>ipsum</td> <td>dolor sit amet.</td> </tr> <tr> <td colspan="3"> <div class="row-details"> <span>Lorem, ipsum.</span> </div> </td> </tr> <tr class="row"> <td>Lorem</td> <td>ipsum</td> <td>dolor sit amet.</td> </tr> <tr> <td colspan="3"> <div class="row-details"> <span>Lorem, ipsum.</span> </div> </td> </tr> </table>