如何使用 jQuery 隐藏和显示表格？答案

【问题标题】：How to Hide and Table Show using jQuery?如何使用 jQuery 隐藏和显示表格？
【发布时间】：2016-01-14 04:33:06
【问题描述】：

我想点击字符“-”，它会隐藏并变成“+”，当我点击“+”时，会显示并变成“-”。这是我在视图中的代码：

<tr style="">
      <td style="width:50%; background-color:#b4abab; height:20px">
       <a href="#" style="text-decoration:none"><b id="hide" style="font-size:20px">-</b><b hidden id="show" style="font-size:20px">+</b></a>
       <input style="margin-left:10px" id="ChkControllers" type="checkbox" name="ccc" value="@item.ID" />@item.Control
                        </td>
                    </tr>
<tr style="width:50%">

 <td id="noidung">
    @foreach (var lstAction in listAction)
             {

                if (ViewBag.SelectedRole != null)
                   {

                       <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" @Tolerance.ModelsAdmin.Utinity.GetActionByRoleControllers((int)@item.ID, ViewBag.SelectedRole, lstAction.ID) type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                            else
                            {
                               <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                        }
                    </td>
                </tr>

这是我的 js 代码

<script type="text/javascript">
$(document).ready(function () {

    $("#hide").click(function () {
        $("#noidung").hide();
        $("#hide").hide();
        $("#show").show();
    });
    $("#show").click(function () {

        $("#hide").show();
        $("#show").hide();
        $("#noidung").show();
    });

});

......

我想知道为什么我只能在第一行隐藏和显示？我怎么能用另一行来做呢？

【问题讨论】：

因为您的 html 无效。 id 属性必须是唯一的，并且您编码 $("#noidung").hide(); 和 $("#noidung").show(); 只会选择带有 id="noidung" 的第一个元素。您需要改用类名

标签： jquery model-view-controller html-table

【解决方案1】：

从您的问题看来，当您分别按 - 和 + 按钮时，您似乎隐藏和显示行内容。

因此，如果每一行都有这些按钮，我们将尝试找出最近的具有类 'noidung' 的兄弟。所以我们可以应用我们的逻辑。因此，我没有将其分成两行，而是将其合并为一行

所以我们将为每一行添加 -,+ 按钮。我们将删除 id 并将其作为类如下

<tr style="">
      <td style="width:50%; background-color:#b4abab; height:20px">
       <a href="#" style="text-decoration:none"><b class="hide" style="font-size:20px">-</b><b hidden class="show" style="font-size:20px">+</b></a>
       <input style="margin-left:10px" id="ChkControllers" type="checkbox" name="ccc" value="@item.ID" />@item.Control
                        </td>

 <td class="noidung">
    @foreach (var lstAction in listAction)
             {

                if (ViewBag.SelectedRole != null)
                   {

                       <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" @Tolerance.ModelsAdmin.Utinity.GetActionByRoleControllers((int)@item.ID, ViewBag.SelectedRole, lstAction.ID) type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                            else
                            {
                               <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                        }
                    </td>
                </tr>

现在我们将为 + , - 按钮添加事件

<script type="text/javascript">
$(document).ready(function () {

    $(".hide").click(function () {
       $('.hide', $(this).closest(".noidung")).hide();
        $(".hide").hide();
        $(".show").show();
    });
    $(".show").click(function () {

        $('.show', $(this).closest(".noidung")).show();
        $(".show").hide();
        $(".hide").show();
    });

});

【讨论】：

【解决方案2】：

Run Demo

试试，

替换

<a href="#" style="text-decoration:none"><b class="hide" style="font-size:20px">-</b><b hidden class="show" style="font-size:20px">+</b></a>

与

 <a href="#" style="text-decoration:none" class='displayShowHide'>-</a>

你的新 html 应该是

<tr style="">
      <td style="width:50%; background-color:#b4abab; height:20px">
       <a href="#" style="text-decoration:none" class='displayShowHide'>-</a>
       <input style="margin-left:10px" id="ChkControllers" type="checkbox" name="ccc" value="@item.ID" />@item.Control
                        </td>
                    </tr>
<tr style="width:50%">

 <td id="noidung">
    @foreach (var lstAction in listAction)
             {

                if (ViewBag.SelectedRole != null)
                   {

                       <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" @Tolerance.ModelsAdmin.Utinity.GetActionByRoleControllers((int)@item.ID, ViewBag.SelectedRole, lstAction.ID) type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                            else
                            {
                               <input style="margin-left:40px; margin-top:5px;" id="@lstAction.ID" type="checkbox" name="aaa" value="@lstAction.ID" />@lstAction.Action
                            }
                        }
                    </td>
                </tr>

将此添加到您的脚本中

$(function () {
    $('.displayShowHide').on('click',function(){
        if($(this).text() == '-')
            $('a').text('+');
        else
          $('a').text('-');

    });
});

【讨论】：