我有一张桌子,我需要折叠每一行以显示特定信息。我尝试了几种方法,但似乎没有任何效果。看起来很容易,但我做不到,该怎么办?
这是tr代码:
<tr role="row">
<td>1</td>
<td class="navtd"><span class="tableinfo">Curating</span></td>
<td>The Book Affair</td>
<td>Automatic Books</td>
<td>2009</td>
</tr>
这是我用来折叠标题的一种方法,它工作得很好:
var acc = document.getElementsByClassName("about");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = document.getElementById("aboutPanel");
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
<section class="header">
<div class="menu">
<table class="nav">
<tbody>
<tr>
<td style="width: 5%"></td>
<td class="navtd" style="width: 17.5%"></span>Tommaso Speretta</td>
<td class="navtd" style="width: 35%"><span class="about"><span>About/Contact</span></span></td>
<td style="width: 35%"></td>
<td style="width: 7.5%"></td>
</tr>
</tbody>
</table>
</div>
<div id="aboutPanel">
<table>
<tbody>
<tr>
<td style="width: 5%"></td>
<td style="width: 17.5%"></td>
<td style="width: 35%">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat
a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci
ratione, et atque velit distinctio consequuntur nisi!
</td>
<td style="width: 35%">
<div><img src="img/profilepic.png" alt="Profile picture Tommaso Speretta" class="profilepic"></div>
</td>
<td style="width: 7.5%"></td>
</tr>
</tbody>
</table>
</section>