Question

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

我希望在这个html表中展开/折叠，当我点击展开时我应该得到一个新的列和行，并且在崩溃时，它应该像以前一样。

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

您能帮助我或提供有关我该怎么做的任何信息吗？

Answer 1

好的我觉得如果你想的话，这个问题太模糊了，无法完全回答。

新列和行的内容来自哪里？你有什么结构？你有什么尝试？什么不起作用？ ^{David Thomas评论。}

如果你不想使用像this one这样的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();

});

正如我所说的那样只是一个例子，它不可扩展（甚至不支持隐藏两行），你可以看到demo here。

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

但是如果你想自己构建它，这可能会派上用场：

.show()
.hide()
.toggle()
.animate()
:nth-child
.children()

还有很多其他方面取决于你的做法。

祝你好运！

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

An accordion是一个简单而优雅的解决方案：javascript和css。

This fiddle来自W3Schools上面的解释。

展开/折叠HTML表格

3 个答案: