javascript - 使用 HTML/Javascript 折叠/展开表格

Question

我有一张很大的 table ，所以我需要一种一直展开它的方法，并且只在必要时展开它。

我如何使用 HTML 做到这一点？为此我需要 Javascript 吗？如果是这样，它的代码是什么？

Answer 1

如果您将使用 jquery，您可以检查下面的代码。

在 CSS 中:

.collapsed-table tr {
  display: none;
}

在 html 中:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<table class="collapsed-table">
   <caption>Expand/collapce</caption> 
   <tr>
       <td></td>
   </tr>
   ....
</table>

<script type="text/javascript">
$('.collapsed-table > caption').click(function() {
   $(this).toggleClass('collapsed-table');
})
</script>