如何隐藏&&；是否使用Javascript单击header元素时显示GridView行？

我有一个GridView，它的结构如下：

• 组头
  • 部门主管
    • （某个人或实体）
    • （某个人或实体）
    • （某个人或实体）
  • 部门主管
    • （某个人或实体）
    • （某个人或实体）
    • （某个人或实体）
• 组头
  • 部门主管
    • （某个人或实体）
    • （某个人或实体）
    • （某个人或实体）
  • 部门主管
    • （某个人或实体）
    • （某个人或实体）
    • （某个人或实体）

虽然我有Javascript可以切换部门标题和按预期工作的子元素，但切换在组标题级别不起作用，因为可以切换一个部门标题的子元素，但不是另一个dept头，所以当在组头级别激活切换时，它只是反转切换，这不是我想要的，所以我尝试编写一些Javascript，当单击组头时，它将隐藏所有并发行，而不管切换状态如何，直到下一个组头（如果未隐藏的话），否则，单击组标题将显示/展开隐藏行，无论切换状态如何，直到下一个组标题

但是，我还无法编写代码，因此当单击组标题时，它会隐藏以下所有行，直到下一个组标题未隐藏时，否则会显示它们。当前我在

if（el.style.display！=“none”）

行遇到

JavaScript运行时错误：无法获取未定义或空引用的属性“display”

，这表明我没有正确操作对象，但由于我对Javascript还不熟悉，我不确定要操作什么obj或attr来获得想要的效果

Javascript:

<script type="text/javascript">
    $(function () {
        $('.group-header').click(function () {
            $(this).nextUntil('.group-header').each(function () {
                var el = this;
                if (el.style.display != 'none') {
                    el.style.display = 'none';
                }
                else {
                    el.style.display = '';
                }
            }())
        });
    });

    $(function () {
        $('.dept-header').click(function () {
            $(this).nextUntil('.dept-header, .group-header').toggle();
        });
    });
</script>

$（函数（）{
$（'.group header'）。单击（函数（）{
$（this）.nextUntil（'.group header'）。each（函数（）{
var el=这个；
如果（el.style.display！=“无”）{
el.style.display='none'；
}
否则{
el.style.display=''；
}
}())
});
});
$（函数（）{
$（“.dept header”）。单击（函数（）{
$（this）.nextUntil（'.dept header.group header'）.toggle（）；
});
});

参考我的剃须刀代码：

<table id="companyGrid" class="table table-bordered table-striped grid">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Designation)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Department)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Company)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Year)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Salary)
        </th>
    </tr>
    @foreach (var group in Model.GroupBy(x => x.Company))
    {
        <tr class="group-header">
            <td colspan="7">
                <span class="h2">@group.Key</span>
            </td>
        </tr>
        foreach (var dept in group.GroupBy(x => x.Department))
        {
            <tr class="dept-header">
                <td colspan="6">
                    <span class="h4">@dept.Key</span>
                </td>
            </tr>
            foreach (var item in dept)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Designation)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Department)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Company)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Year)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Salary)
                    </td>
                </tr>
            }
        }
        <tr class="group-footer">
            <td colspan="6" class="text-center">
                <span class="label label-info">Company: @group.Key</span>
                <span class="label label-success">Total Employee: @group.Count()</span>
                <span class="label label-primary">Avg Salary: @group.Average(x => x.Salary).ToString("C")</span>
            </td>
        </tr>
    }
</table> 

@DisplayNameFor（model=>model.Name）
@DisplayNameFor（model=>model.Designation）
@DisplayNameFor（model=>model.Department）
@DisplayNameFor（model=>model.Company）
@Html.DisplayNameFor（model=>model.Year）
@DisplayNameFor（model=>model.Salary）
@foreach（Model.GroupBy（x=>x.Company）中的var组）
{
@组键
foreach（group.GroupBy中的var部门（x=>x.Department））
{
@系钥匙
foreach（部门中的var项目）
{
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Designation）
@DisplayFor（modelItem=>item.Department）
@DisplayFor（modelItem=>item.Company）
@DisplayFor（modelItem=>item.Year）
@DisplayFor（modelItem=>item.Salary）
}
}
公司：@group.Key
员工总数：@group.Count（）
平均工资：@group.Average（x=>x.Salary.ToString（“C”）
}

编辑

$(function () {
                      $('.group-header').click(function () {
                          var parentgrpHeader = $(this);

                          $(this).nextUntil('.group-header').each(function () {
                             !parentgrpHeader.hasClass("toggle") ?  $(this).hide() : $(this).show();
                          });

                          parentgrpHeader.toggleClass('toggle');
                      });


                       $('.dept-header').click(function () {
                          $(this).toggleClass('collapsed').nextUntil('.dept-header, .group-header').toggle();
                      });


              });

---

我担心这对我正在尝试的情况不太管用，不确定它在td-tr中是否会干扰javascript而不是div。我将Razor代码生成的原始HTML放在这个提琴中。单击ABC Infotech后，ABC Infotech和TPS软件之间的所有行应消失。事实上，我刚刚意识到这个答案与我试图解决的问题是一样的，如果部门标题被折叠，那么单击组标题将折叠它们，这样部门标题下的数据将反转并变为可见。单击组标题将始终展开部门标题，它永远不会倒塌。@KurtWagner:是的，我知道，但现在你应该采取一些措施，自己修复它。如果你不能这样做。你可以再问一次-谢谢

$(function () {
                      $('.group-header').click(function () {
                          var parentgrpHeader = $(this);

                          $(this).nextUntil('.group-header').each(function () {
                             !parentgrpHeader.hasClass("toggle") ?  $(this).hide() : $(this).show();
                          });

                          parentgrpHeader.toggleClass('toggle');
                      });


                       $('.dept-header').click(function () {
                          $(this).toggleClass('collapsed').nextUntil('.dept-header, .group-header').toggle();
                      });


              });