Javascript 如何在网格中实现行折叠/展开？

我正在使用ASP.NET C#进行应用程序开发，我想在单击Elerik RadGrid上的“--”和“+”图像时实现行折叠/展开，目的是显示最新版本的数据，然后隐藏相同数据行的旧版本，只有在单击“+”图像

网格的输出如下图所示：

在这里，我从DB查询数据源并直接绑定到网格，我的目标是隐藏以黄色突出显示的行，并在最新的数据行上附加“+”或“--”图像

其思想是使用JavaScript/jQuery隐藏DBRow>1，其中DBRow列将隐藏在网格中，DBRow将作为JavaScript选择要隐藏它的元素的指示符

<telerik:RadGrid runat="server" ID="gvID" ShowHeader="true" Width="1000px" >
<mastertableview autogeneratecolumns="false" showheaderswhennorecords="true">
<Columns>
    <telerik:GridBoundColumn DataField="DBName" HeaderText="Name">
    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="DBVersion" HeaderText="Version">
    </telerik:GridBoundColumn>

    <telerik:GridBoundColumn DataField="DBRow" HeaderText="DBRow" ReadOnly="true">
        <HeaderStyle CssClass="hiddenColumn" />
        <ItemStyle CssClass="hiddenColumn" />
    </telerik:GridBoundColumn>

    <telerik:GridEditCommandColumn UniqueName="EditColumn" ButtonType="ImageButton" />
</Columns>
</mastertableview>

我的问题是如何将“+”和“--”附加到正确的行中，并隐藏DBRow>1的行

如果你有更好的方法，请与我分享。 多谢各位

已更新

以下是生成的HTML：

<div id="gvID" class="RadGrid RadGrid_Default" style="width: 1000px;">
    <table class="rgMasterTable" border="0" id="gvID_ctl00" style="width: 100%;
        table-layout: auto; empty-cells: show;">
        <thead>
            <tr>
                <th scope="col" class="rgHeader" style="white-space: nowrap;">
                    Name
                </th>
                <th scope="col" class="rgHeader">
                    Version
                </th>
                <th scope="col" class="hiddenColumn rgHeader">
                    DBRow
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="rgRow" id="gvID_ctl00__0">
                <td>
                    A
                </td>
                <td>
                    Ver.0
                </td>
                <td class="hiddenColumn">
                   1
                </td>
            </tr>
            <tr class="rgAltRow" id="gvID_ctl00__1">
                <td>
                    B
                </td>
                <td>
                    Ver.1
                </td>
                <td class="hiddenColumn">
                   1
                </td>
            </tr>
            <tr class="rgRow" id="gvID_ctl00__2">
                <td>
                    B
                </td>
                <td>
                    Ver.0
                </td>
                <td class="hiddenColumn">
                   2
                </td>
            </tr>
            <tr class="rgRow" id="gvID_ctl00__3">
                <td>
                    C
                </td>
                <td>
                    Ver.1
                </td>
                <td class="hiddenColumn">
                   1
                </td>
            </tr>
            <tr class="rgRow" id="gvID_ctl00__4">
                <td>
                    C
                </td>
                <td>
                    Ver.0
                </td>
                <td class="hiddenColumn">
                   2
                </td>
            </tr>
        </tbody>
    </table>
    <input id="gvID_ClientState" name="gvID_ClientState" type="hidden" />
</div>

名称
版本
数据库行
A.
0版
1.
B
第1版
1.
B
0版
2.
C
第1版
1.
C
0版
2.

您可以使用CSSThanks进行回复，仅CSS是不够的，如何跟踪展开/折叠行？我找到了解决方案，请参阅