不使用任何 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>