展开 使用 javascript 折叠 asp.net 数据网格控件的分组行

问：

我有一个 asp.net 数据网格控件，我在其中显示分组行（如果一行中有可用的订单号链接，则为父行，如果订单号不存在，则为子行）。 我想在每个订单号旁边显示一个切换按钮。“超链接”和“展开”，单击时折叠每个分组。 还有分页，因此在某些情况下，分组数据会显示到下一页，这就是我检查 Order# 链接控件是否存在的原因。 下面是无法正常工作的图像：

以下是生成的 html 标记的示例：

<table cellspacing="0" cellpadding="0" border="0" id="dgFullOrdersView" style="width:100%;border-collapse:collapse;">
   <tbody>
      <tr>
         <td class="FolderImageSHeader">&nbsp;</td>
         <td class="FilingSHeader">FOLDER</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader">VIEW</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader">ORDER#</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader">DEBTOR</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader">JURISDICTION</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader">TYPE</td>
         <td class="SpacerSColumn">Bill Code</td>
         <td class="FilingSHeader">REF1</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader" style="white-space:nowrap;">ORDER DATE</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader">STATUS</td>
         <td class="SpacerSColumn">&nbsp;</td>
         <td class="FilingSHeader" align="center" style="white-space:nowrap;">ACTION</td>
         <td class="SpacerSColumn">&nbsp;</td>
      </tr>
      <tr class="UCCFilingPortfolioTableItem">
         <td>&nbsp;</td>
         <td>
            <span id="dgFullOrdersView_ctl02_lblSearchref">123-TEST</span>
         </td>
         <td>&nbsp;</td>
         <td>
         </td>
         <td>&nbsp;</td>
         <td>
            <img id="dgFullOrdersView_ctl02_imgRecurring" title="Scheduled Generated Order" style="border-width:0px;">&nbsp;
         </td>
         <td>
            <input name="dgFullOrdersView$ctl02$btnToggle" type="button" id="dgFullOrdersView_ctl02_btnToggle" onclick="ToggleGroup(this);" value=">">&nbsp;
         </td>
         <td>
            <a id="dgFullOrdersView_ctl03_hypOrder" class="mainnav1" 
               onclick="LogOrderViewDetails(237851)" href="OrderResults.aspx?OrderNo=237851">237851</a>
         </td>
         <td>
         </td>
         <td>
            <font class="mainnav2">
            <span id="dgFullOrdersView_ctl02_lblSearchKey">SUBWAY</span></font>
         </td>
         <td>&nbsp;</td>
         <td>
            AL
            :
            Sec.of State
         </td>
         <td>&nbsp;</td>
         <td>
            <span id="dgFullOrdersView_ctl02_lblOrderType"></span>
         </td>
         <td>&nbsp;</td>
         <td>123456789</td>
         <td>&nbsp;</td>
         <td>08/15/2023</td>
         <td>&nbsp;</td>
         <td>
            <font class="mainnav2">
            <span id="dgFullOrdersView_ctl02_lblStatus">Submitted</span>    
            </font>                              
         </td>
         <td>&nbsp;</td>
         <td align="left">                                
      </tr>
<--OTHER TRs here-->
   </tbody>
</table>

以下是我正在使用的脚本，但它正在错误地展开折叠：

function ToggleGroup(button) {
            var row = $(button).closest('tr');
            var group = row.nextUntil('tr:has(button)');
            group.toggle();
        }

请建议如何有效地实施这一点。