按钮上的表格内显示/隐藏(切换)表格

时间:2015-11-11 07:08:47

标签: javascript jquery html razor html-table

我有两个不同的表,其中一个表是根据第一个表的值填充的。目前,结果表将在新页面中呈现。但我希望在原始表格的下一行链接点击时填充表格。

查看第一个表格

<table class="table">
    <tr>
        <th>Option Name</th>
        <th>Technical Characteristic</th>
        <th></th>
    </tr>
    @foreach (var item in Model.Options)
    {
        <tr>
            <td data-toggle="tooltip" title="@item.DescriptionDE">@Html.ActionLink(item.OptionName, "ViewOptionValues", "OptionValues", new { id = item.OptionID }, null)</td>
            <td>@Html.ActionLink(@item.TechnicalCharacteristic.TCName, "ViewTcSet", "TechnicalCharacteristics", new {id = item.TechnicalCharacteristicID },null)</td>
            <td>
                @Html.ActionLink("View Properties", "ViewOptionvalues", "Options", new { id = item.OptionID }, null)|
                @Html.ActionLink("Edit", "Edit", new { id = item.OptionID })|
                @Html.ActionLink("Details", "Details", new { id = item.OptionID })|
                @Html.ActionLink("Delete", "Delete", new { id = item.OptionID })
            </td>
        </tr>

    }
</table>

点击ActionLink(View Properties)会生成下表

<table class="table" style="table-layout:fixed">
    <tr>           
        <th>Option Values</th>           
        @foreach (var tc in Model.TechnicalCharacteristic.TcSets.OrderBy(x => x.SetName))
        {
            <th>
                @tc.SetName
            </th>
        }
    </tr>
    @foreach (var ov in Model.OptionValues)
    {
        var link = false;
        <tr>
            <th>@ov.OptionVal</th>
            @foreach (var s in Model.TechnicalCharacteristic.TcSets.OrderBy(x => x.SetName))
            {
                int count = 1;                    
                foreach (var sv in ov.SetValue)
                {
                    if (sv.TcSetID == s.TcSetID)
                    {
                        count = 0;
                        <td>@sv.Value</td>
                    }
                }
                if (count == 1)
                {
                    <td class="alert-danger">Missing Values</td>
                    link = true;

                }
            }
            @if(link==true)
            {
                <td>@Html.ActionLink("Add missing properties", "Create", "SetValues", new {@id=ov.OptionValueID },null)</td>
            }

        </tr>
    }
</table>

我尝试了什么

我尝试在主表的forloop中添加一个额外的行并将其设置为隐藏。但是tr style= display:hidden并不有效。我对div做了同样的事情。在这里,我不知道如何将参数传递给填充第二个表的函数以及如何渲染它。

更新

 @Ajax.ActionLink("View Properties", "ViewOptionvalues", "Options", new { id = item.OptionID }, new AjaxOptions { UpdateTargetId="ViewProperty"})

现在我将表格显示在<tr> <td><div id="ViewProperty"></div></td></tr>中。但总是只有第一个<div>被填充。

脚本

<script type="text/javascript">
$(document).ready(function () {
    $('#links').click(function () {
        $('.View').toggle();

    });
});
</script>

其中links<td>的类,其中AjaxActionLinkView是保存div的<tr>的类。该表正在切换,但该表始终显示在第一行之后。

我也试过this.next(),但没有显示任何内容。

0 个答案:

没有答案