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

我創建了一個表格，每當用戶單擊該行時，它都會展開下一個隱藏行。為此，我使用了以下腳本，其中類的下一個元素row-details被定位為隱藏元素。這里的問題是使用 id 或類來定位行內的每個 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 行，每行都有一個包含詳細資訊的隱藏行。我對兩個隱藏行都使用了相同的類。我想要實作的是在不定義任何 Id 或類的情況下擴展隱藏行。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>

uj5u.com熱心網友回復：

在這里，我只有一個用于整個表的事件偵聽器。單擊后，我會找到最接近 tr.row的并在nextElementSibling. 使用選擇器，我可以控制<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>

標籤：javascript html css

上一篇：如何在JS中設定跨度而不是發出警報

下一篇：node.js表達req.body未定義