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

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。您可以将click事件添加到任何内容中。

Answer 2

我认为您可以在javascript中使用此代码执行此操作：

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

单独扩展/折叠多个HTML表

2 个答案: