Javascript 单击按钮显示/隐藏（切换）表格中的表格

我有两个不同的表，其中一个表是基于第一个表的值填充的。当前，结果表呈现在新页面中。但我希望在原始表的下一行单击链接时填充该表

第一个表的视图

<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>

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

我尝试的

我试图在主表的forloop中添加一个额外的行，并将其设置为hidden。但是

tr style=display:hidden

无效。我对

div

也做了同样的操作。在这里，我不知道如何将参数传递给填充第二个表的函数，以及如何呈现它

更新

<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>

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

现在我在

中显示了该表。但始终只填充第一个

脚本

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

    });
});
</script>

$（文档）.ready（函数（）{
$（“#链接”）。单击（函数（）{
$（'.View'）.toggle（）；
});
});

其中，

links

是包含

AjaxActionLink

的

的类，

视图

是包含div的

的类。正在切换表格，但表格始终显示在第一行之后

---

我还尝试了

this.next（）

，但它没有显示任何内容。

您应该使用

display:none

而不是hidden。试试看，好的<代码>显示：无正确。但我仍然无法将第二个表呈现到该特定行中。您需要通过单击该操作链接来运行ajax调用，只需在隐藏的tr元素中替换其响应，然后显示它。因此，我应该将

Html.ActionLink

更改为

ajax.ActionLink

？如果使用正常的操作链接，则可以同时执行这两种操作您必须通过JS/jQuery注册其客户机事件，然后使用其href运行ajax并获得响应。另一方面（Ajax.ActionLink），您将拥有类似onSuccess的委托，这样您就可以使用它了。选择权在你！！