jQuery表行展開

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，因此您可以區分行。