分别扩展/折叠多个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)使每个表唯一，并提供一些可单击的内容以折叠该tbody中的所有TR 。

我不确定您要使用什么作为单击来折叠的东西，所以我只添加了A 您可以将click事件添加到任何内容。

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