用更少/更多按鈕創建一個可折疊的表格？

Question

我有一張有 50 行的表格，如果您第一次在頁面上查看，這對於網站來說太多了。 我想創建一個可以展開和折疊整個桌子的按鈕。

我最大的問題是我不知道 javascript:(。

我不想在此處粘貼 50 行代碼...這是一個較短的示例：

<table>
<tbody>
    <tr>
        <td>row 1</td>
        <td>row 2</td>
    </tr>
    <tr>
        <td>row 1</td>
        <td>row 2</td>
    </tr>
    <tr>
        <td>row 1</td>
        <td>row 2</td>
    </tr>
<! --it should unfold here-->

    <tr>
        <td>row 1</td>
        <td>row 2</td>
    </tr>
    <tr>
        <td>row 1</td>
        <td>row 2</td>
    </tr>
</tbody>
</table>

<button onclick="toggleText()" id="showMore">Show More
</button>

就像您在我的示例中看到的那樣，我想在 3 行后展開整個表格。 我必須做什么才能實現這一目標？

非常感謝，周末愉快！

Answer 1

試試下面的 javascript 代碼。

<script>
      function toggleText() {
        const tableRows = document.getElementsByTagName("tr");
        // initialise i with row number from which you need to hide/show
        for (let i = 3; i < x.length; i++) {
          if (tableRows[i].style.display === "none") {
            tableRows[i].style.display = "table-row";
          } else {
            tableRows[i].style.display = "none";
          }
        }
      }
    </script>

Answer 2

對於這種情況，您可以使用 Javascript 切換 function。 像這樣的東西：

 const trs = document.getElementsByTagName("tr"); const startWith = 3; function showMore() { for (let i = startWith; i < trs.length; i++) { trs[i].classList.toggle('hidden') } }

 .hidden { display:none; }

 <table id="t"> <tbody> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> <! --it should unfold here--> <tr class="hidden"> <td>row 1</td> <td>row 2</td> </tr> <tr class="hidden"> <td>row 1</td> <td>row 2</td> </tr> </tbody> </table> <button onclick="showMore()" id="showMore">Show More </button>

Answer 3

正如我的評論中提到的，您可以使用 CSS 選擇器邏輯簡單地 select 多余的表行。

 function excerpt(){ var excessRows = tableBody.querySelectorAll("tr:nth-child(n+4)"); excessRows.forEach(row => row.style.display = row.style.display? "": "none"); }

 <table> <tbody id="tableBody"> <tr> <td>row 1 this</td> <td>row 1 that</td> </tr> <tr> <td>row 2 this</td> <td>row 2 that</td> </tr> <tr> <td>row 3 this</td> <td>row 3 that</td> </tr> <! --it should unfold here--> <tr> <td>row 4 this</td> <td>row 4 that</td> </tr> <tr> <td>row 5 this</td> <td>row 5 that</td> </tr> </tbody> </table> <button onclick="excerpt()" id="showMore">Show Less/More</button>