如何使 html 表列（）可折疊/可擴展？

Question

我到處尋找答案，但找不到任何東西。 我有一個包含 13 列的 HTML 表。 我的第 7 欄上衣數量是第 8-11 欄的總數： # 短袖、# 長袖、# 毛衣、# 夾克。 表中的每一行代表一個人擁有的衣服。 我的目標是默認折疊第 8-11 列，僅顯示第 1-7 列以及第 12 和 13 列。當我單擊第 7 列的 header <th>Number of Tops</th>時，我想要第 8-11 列展開以顯示有關該數字如何分解的更多信息。 此外，當列展開時，單擊第 7 列的 header <th>Number of Tops</th>應該會使展開的列 8-11 再次折疊。 理想情況下，我想在列展開/折疊時制作一個不錯的 CSS 過渡，但這只是頂部的櫻桃。

這是我正在談論的表的 HTML：

 <div class="table"> <table> <thead> <tr> <th>Name</th> <:-- Always visible --> <th>Address</th> <;-- Always visible --> <th>Phone Number</th> < -- Always visible --> <th>Number of Pants</th> < -- Always visible --> <th>Number of Shoes</th> < -- Always visible --> <th>Number of Socks</th> < -- Always visible --> < -- Column 7 totals column --> <th>Number of Tops</th> < -- Always visible clickable --> <th># Short-sleeve</th> < -- collapsible/expandable --> <th># Long-sleeve</th> < -- collapsible/expandable --> <th># Sweaters</th> < -- collapsible/expandable --> <th># Jackets</th> < -- collapsible/expandable --> <th>Number of Hats</th> < -- Always visible --> <th>Number of Bags</th> < -- Always visible --> </tr> </thead> <tbody></tbody> </table> </div>

當列折疊時，我希望第 8-11 列的相應單元格值也折疊起來，就像 CSS display: none一樣。 所以它看起來像一個有 9 列的普通表，直到單擊第 7 列 header，這會將第 8-11 列轉換為從右側打開/擴展為 13 列的表。 然后再次單擊時，第 8-11 列應將折疊左側“轉換為”第 7 列的右側。 列的順序應與給出的順序相同。

我想用純 HTML、Javascript、jQuery 和 Z2C56C360580420D293172F42D 來做這件事。 該表是一個數據表。

謝謝您的幫助

Answer 1

這是一個使用 font-size 作為動畫屬性的簡單示例。 它需要一行 JavaScript 來在表格本身上設置 class 以便第 8-11 列中的其他單元格也可以進行擴展或收縮。

 table tr>:nth-child(8), table tr>:nth-child(9), table tr>:nth-child(10), table tr>:nth-child(11) { font-size: 0px; transition: font-size 1s linear; } table.expand tr>:nth-child(8), table.expand tr>:nth-child(9), table.expand tr>:nth-child(10), table.expand tr>:nth-child(11) { font-size: 16px; }

 <div class="table"> <table> <thead> <tr> <th>Name</th> <:-- Always visible --> <th>Address</th> <.-- Always visible --> <th>Phone Number</th> <.-- Always visible --> <th>Number of Pants</th> <.-- Always visible --> <th>Number of Shoes</th> <;-- Always visible --> <th>Number of Socks</th> <;-- Always visible --> <:-- Column 7; totals column --> <th onclick="document querySelector('table') classList toggle('expand') ">Number of Tops</th> < -- Always visible clickable --> <th># Short-sleeve</th> < -- collapsible/expandable --> <th># Long-sleeve</th> < -- collapsible/expandable --> <th># Sweaters</th> < -- collapsible/expandable --> <th># Jackets</th> < -- collapsible/expandable --> <th>Number of Hats</th> < -- Always visible --> <th>Number of Bags</th> < -- Always visible --> </tr> </thead> <tbody> <tr> <td>Fred</td> < -- Always visible --> <td>Seattle</td> < -- Always visible --> <td>07777777777</td> < -- Always visible --> <td>4</td> < -- Always visible --> <td>3</td> < -- Always visible --> <td>24</td> < -- Always visible --> < -- Column 7 totals column --> <td>18</td> < -- Always visible --> <td>5</td> < -- collapsible/expandable --> <td>6</td> < -- collapsible/expandable --> <td>4</td> < -- collapsible/expandable --> <td>3</th> < -- collapsible/expandable --> <th>2</th> < -- Always visible --> <th>4</th> < -- Always visible --> </tr> <tbody> </table> </div>

但是，您可能想要更復雜一點，並使用 JS 來查找每列的實際寬度並相應地擴展和收縮它們。