c# - 单独展开/折叠多个 HTML 表格

Question

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

<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 都会递增。我之前尝试过一些代码，但我能得到的最接近的是展开/折叠，它只影响了第一个详细信息表。先感谢您。

Answer 1

此示例听起来像是您正在寻找的最终结果。

所以基本上听起来你只需要使用@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) 使每个表格都独一无二，并提供一些可单击的内容以折叠TR该 tbody 中的所有内容。

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

Answer 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");  
}