创建一个垂直折叠和展开html表 - Creating a vertically collapsing and expanding html table

Creating a vertically collapsing and expanding html table

本文关键字：html 折叠垂直一个创建 | 更新日期: 2023-09-27

我有一个php脚本，读取一个文件，并生成一个多页的表和它的方式长阅读容易。有没有办法使每个表崩溃与点击一个小按钮，只留下该表的标题栏?

谢谢!

可以将表格放入div元素中，并使用jquery在按钮单击时切换。

下面是一个表的例子

HTML

<button id="hideshow">Helper</button>
<div id="hideshow1"><table><tr><td>One</td><td>Two</td></tr><tr><td>One</td><td>Two</td></tr></table></div>

JAVASCRIPT

   $( "#hideshow" ).click(function() {
      $( "#hideshow1" ).toggle("slow");      
    });

希望有帮助!

我认为你可以使用CSS和JavaScript或JQuery来做到这一点。用css类定义一个div，例如"collapsible"，在你的页面上放一个链接，然后写一个脚本，找到这个类的任何元素并隐藏/显示它们。

创建一个div。将表放在data中。为div和In脚本提供溢出，使用Jquery的滑动切换、显示和隐藏功能。您将得到必要的折叠和展开html表