单独展开/折叠多个 HTML 表格答案

【问题标题】：Expanding/Collapsing Multiple HTML tables individually单独展开/折叠多个 HTML 表格
【发布时间】：2012-12-26 16:06:13
【问题描述】：

我正在尝试在网页上显示主详细报告。它现在的工作方式是我正在创建一个表来创建每个主行，然后在每个主行下是另一个包含详细信息的表。其中一些表是多行的。我将如何使详细信息行展开/折叠？这是我的详细信息行代码：

<table>
    <tr>
        <th>
            Bar Code &nbsp;
        </th>
        <th>
            Start Time
        </th>
        <th>
            Length &nbsp;
        </th>
        <th>
            End Time
        </th>
    </tr>

    <tbody id = '@ViewBag.i'>
        @foreach (var item in Model)
        { 
            <tr>
                <td>
                    @item.BarCode
                </td>
                <td>
                    @item.StartTime
                </td>
                <td>
                    @item.Length
                </td>
                <td>
                    @item.EndTime
                </td>
            </tr>
        }
    </tbody>
</table>

在这种情况下，每次运行在另一个视图中生成此表的循环时，viewBag 都会递增。我之前尝试过一些代码，但我能得到的最接近的是展开/折叠，它只影响了第一个详细信息表。提前谢谢你。

【问题讨论】：

你愿意使用jQuery吗？还是你想要一个纯 javascript 方法。
我愿意接受任何解决方案。 jQuery 会很好。
...我认为我们将不得不做类似的事情，但如果你粘贴一些更相关的代码或 JSfiddle，然后我们可能会得到更清晰的图片..
我认为这与您想要的 jsfiddle.net/xwP62/1 接近吗？只需点击表头即可。
谢谢，我刚试过，当我点击标题时它什么也没做。我不得不用 ViewBag 命名表的原因是因为有数百行并且这个数字可能会改变。将 id 替换为 @(ViewBag.i) 会导致任何问题吗？

【解决方案1】：

This example 听起来像是您正在寻找的最终结果。

所以基本上听起来你只需要使用@ViewBag.i 来使每个表都独一无二。像这样：

<table>
    <tr>
        <th>
            Bar Code &nbsp;
        </th>
        <th>
            Start Time
        </th>
        <th>
            Length &nbsp;
        </th>
        <th>
            End Time
        </th>
    </tr>

    <tbody id = 'someTbodyID_@(ViewBag.i)'>
        @foreach (var item in Model)
        { 
            <tr>
                <td>
                    @item.BarCode
                </td>
                <td>
                    @item.StartTime
                </td>
                <td>
                    @item.Length
                </td>
                <td>
                    @item.EndTime
                </td>
            </tr>
        }
    </tbody>
</table>

<a href="#" id="clicker_@(ViewBag.i)">click me to collapse 1</a>

然后在js中，包括jQuery：

$(function(){
    $("#clicker_@(ViewBag.i)").click(  function(){
        $("#someTbodyID_@(ViewBag.i) tr").toggle();
    });        
});

这将使用@(ViewBag.i) 使每个表都独一无二，并提供一些可供单击的内容以折叠该tbody 中的所有TR。

我不确定你想用什么来点击折叠，所以我只是添加了A。不过，您可以将点击事件添加到任何内容。

【讨论】：

我意识到您的意思是展开/折叠，所以我将代码从 hide() 更改为 toggle()。
感谢您的帮助。当我尝试使用它时，链接显示但没有做任何事情。不过，我可能正在执行错误的 jQuery。我对它还是很陌生。这是我的代码：
点击我折叠 1
验证您是否正确包含了 jQuery。确保你的 HEAD 中有这样的东西：<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
另外，请检查您的“开发者工具控制台”，看看是否有任何错误。

【解决方案2】：

我认为你可以在 javascipt 中使用这段代码来做到这一点：

function showHide(obj){  
var tbody = obj.parentNode.parentNode.parentNode.getElementsByTagName("someTbodyID_@(ViewBag.i)")[0];  
var old = tbody.style.display;  
tbody.style.display = (old == "none"?"":"none");  
}

【讨论】：