Question

您好我正在尝试展开并折叠从数据库填充的表中的行。但是当我尝试展开第二行时，第一行会展开，所以第二行和第三行不会展开。

JS：

<script language="javascript" type="text/javascript">
    $('.showhide').click(function () {
        $(this).parents("tr").next().slideToggle();
        return false;
    });
</script>
<script language="javascript" type="text/javascript">
function toggleTable() {
    if (document.getElementById("hide").style.display == "none") {
        document.getElementById("hide").style.display = "";
        document.getElementById("show").value = "-";
    }
    else {
        document.getElementById("hide").style.display = "none";
        document.getElementById("show").value = "+";
    }
}
</script>

HTML：

@{
ViewBag.Title = "Verworpen Voorstellen";
}
@if (Model.Any())
{
 <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Titel)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Student)
            </th>

            <th>@Html.DisplayNameFor(model => model.Promotor)</th>

            <th>OD</th>

            <th>@Html.DisplayNameFor(model => model.Status)</th>

            <th>@Html.DisplayNameFor(model => model.CreatieDatum)</th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            if (item.Student != null && item.Promotor != null)
            {
                <tr>

                    <td>
                        @String.Format("{0}", item.Titel)
                    </td>
                    <td>
                        @String.Format("{0} {1}", item.Student.Voornaam,     item.Student.Naam)
                    </td>
                    <td>
                        @Html.ActionLink(@String.Format("{0} {1}", item.Promotor.Voornaam, item.Promotor.Naam), "PromotorDetails", item.Promotor)
                    </td>

                    <td>
                        @if (item.OnderzoeksDomein1 != null && item.OnderzoeksDomein2 == null)
                        {
                            @String.Format("{0}", item.OnderzoeksDomein1.OdNaam)
                        }
                        else
                        {
                            if (item.OnderzoeksDomein1 != null && item.OnderzoeksDomein2 != null)
                            {
                                @String.Format("{0}, {1}", item.OnderzoeksDomein1.OdNaam, item.OnderzoeksDomein2.OdNaam)
                            }
                            else
                            {
                                @String.Format("-")
                            }
                        }
                    </td>
                    <td>
                        @String.Format("{0}", item.BPStatus.ToString())
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.CreatieDatum)
                    </td>
                    <td>
                        <input type="button" id="show" value="+" onclick="toggleTable();" style="width:auto;" class="showhide"/>
                    </td>

                </tr>
            <tr id="hide" style="display: none">
                    <td>
                    </td>
                    <td colspan="6">
                        @String.Format("{0} {1}", item.Student.Voornaam, item.Student.Naam)
                    </td>

            </tr>
            }
        }

    </table>

如果我从第二行按下按钮，第一行的额外信息将扩展而不是第二行的信息

Answer 1

解决这个问题的最简单方法是为每一行提供一个唯一的ID，例如“hide-1”和“hide-2”等。

这样的事情：

<td>
    <input type="button" id="show-@item.Id" value="+" onclick="toggleTable(@item.Id);" style="width:auto;" class="showhide"/>
</td>

...

<tr id="hide-@item.Id" style="display: none">
    <td>
    </td>
    <td colspan="6">
         @String.Format("{0} {1}", item.Student.Voornaam, item.Student.Naam)
    </td>

</tr>

然后：

<script type="text/javascript">
    function toggleTable(Id) {
        if (document.getElementById("hide-"+Id).style.display == "none") {
            document.getElementById("hide-"+Id).style.display = "";
            document.getElementById("show-"+Id).value = "-";
        }
        else {
            document.getElementById("hide-"+Id).style.display = "none";
            document.getElementById("show-"+Id).value = "+";
        }
    }
</script>

@ item.Id将是该特定对象的唯一ID，因此您可以区分彼此的行。

Jquery表行扩展

1 个答案: