展开/折叠 HTML 表格

Question

我有一个从服务器动态生成的HTML表。

我想在这个 html 表中有一个展开/折叠，当我单击展开时，我应该得到一个新的列和行，在折叠时，它应该和以前一样。

我不想为此使用任何第三方插件。我想使用 jQuery 和 Ajax。

你能帮助我或提供任何关于我如何做到这一点的信息吗？

Answer 1

好的，

我认为这个问题太模糊了，如果你考虑一下，无法完全回答。

新列和行的内容从何而来？你有什么结构？你已经尝试过什么了？什么不起作用？^{大卫·托马斯评论道。}

如果您不想使用像这样的jQuery插件，这意味着您必须自己做，并且a）这里没有人会完全为您做b）更不用说没有任何信息了，那只是猜测。

这里所说的是一个快速而肮脏的例子，说明你的方法应该是什么样的。

.HTML

<table border="1">
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
    <tr class="clickable">
        <td colspan="2">Click to toggle Next</td>            
    </tr>
    <tr>
        <td>Test</td>
        <td>Test 2</td>
    </tr>
</table>

jQuery

$(".clickable").click(function() {
    $(this).next().toggle();
});

正如我所说，这只是一个例子，它不可扩展（甚至不支持隐藏两行），您可以在此处查看演示。

如果您更新问题，我可以用更好更个性化的答案更新答案。

但是，如果您想自己构建它，其中一些可能会派上用场：

.show（）
.hide（）
.toggle（）
.animate（）
：第n个孩子
.儿童（）

还有许多其他取决于您的方法。

祝你好运！

Answer 2

这是一个快速的例子，我希望如果我正确理解您的问题会有所帮助。

使用此结构：

 <a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
    <thead>
        <tr>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
            <td>
                HEAD
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
        <tr>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
            <td>
                Demo
            </td>
        </tr>
    </tbody>
</table>

也许你可以做这样的事情：

  $(document).ready(function () {
        $(".expand").click(function () {
            $("#mytable tbody").show("slow");
        });
        $(".collapse").click(function () {
            $("#mytable tbody").hide("fast");
        });
    });

Answer 3

手风琴是一个简单、优雅的解决方案：javascript 和 css。

这个小提琴来自上面的W3Schools解释。