显示隐藏的表格，点击答案

【问题标题】：Show hidden table, onclick显示隐藏的表格，点击
【发布时间】：2017-01-11 19:02:15
【问题描述】：

我想在用户单击搜索按钮后显示一个隐藏的表格。我在这里遵循了一些示例，但似乎无法使其正常工作。我可以隐藏结果，但在点击搜索按钮后无法让它们出现。我做错了什么？

HTML

<h1>SEARCH</h1>

<%=search_form_for @search, url: user_path(current_user) do |f| %>
    <div class="field">
    <%= f.label :Plan_Name_cont, "Name Contains" %>
    <%= f.text_field :Plan_Name_cont %>
</div>
    <div class="field">
    <%= f.label :Participants_gteq, "Participants Between" %>
    <%= f.text_field :Participants_gteq %>
    <%= f.label :Participants_lteq, "and" %>
    <%= f.text_field :Participants_lteq %>
</div>
 <div class="actions"><%= f.submit "Search" %></div>
<% end %>


<div class="hidden">
<table>
  <tr>
     <th><%= sort_link @search, :Plan_Name, "Plan Name" %></th>
     <th><%= sort_link @search, :Filing_Method, "Filing Method" %></th>
     <th><%= sort_link @search, :Participants, "Participants" %></th>
     <th><%= sort_link @search, :Filing_Type, "Filing Type" %></th>
</tr>

  <body>
    <% @fives.each do |five| %>
    <tr>
         <td><%= five.Plan_Name %> </td>
         <td><%= five.Filing_Method %> </td>
         <td><%= five.Participants %> </td>
         <td><%= five.Filing_Type %> </td>
    <tr>
    <% end %>
    </table>
    </div>
  </body>
<%= will_paginate @fives %>
</div>
</div>

用户 CSS

div.hidden { display: none; }

Application.js

$("table").on("click", function(){
    $("div:hidden").show();
});

【问题讨论】：

标签： jquery css ruby

【解决方案1】：

另一个答案会很好，但我想我倾向于使用这种方法：

创建一个 CSS 类：
```
.hidden { display: none }
```

使用这个 JS：

$("table").off("click").on("click", function(e){
  var $table = $(e.currentTarget)
  $table.toggleClass("hidden")
});

通过使用$(e.currentTarget)，您只选择了被点击的表格，而使用$("div:hidden")，您将选择所有隐藏的表格。请注意$("div:hidden") 和$("div.hidden") 不一样。

如果要在页面加载时隐藏表格，请在 HTML 中添加 hidden 类。

off("click") 部分是可选的，可能没有区别。但如果由于某种原因您收到重复事件，它会有所帮助。

【讨论】：

感谢您的帮助@maxplener，但我无法让它工作。我检查以确保我的 javascript 工作正常并且它适用于其他功能。就像我说的那样，我隐藏表格没有问题，但在点击我的搜索按钮后似乎无法让它们显示出来。请注意，搜索结果来自正在查询的大型数据库。正如您在顶部看到的，我有一个 form_for 和 f.submit 正在被单击以生成结果。这是我目前唯一能想到的。
在您的 onclick 事件中添加一个调试器语句，并在开发控制台中找出正确的代码。
好的，让我看看我能找到什么。我测试了其他 jquery 和 javascript 函数，其他一切都运行良好。我就是无法让这张表出现。
真正尝试调试器。这将有很大帮助
谢谢，马克斯。感谢您的帮助，我找到了解决方案。

【解决方案2】：

这里人编辑你的js并改变

$("table").on("click", function(){
   $("div.hidden").removeClass("hidden").addClass( "yourClass" );
});

祝你好运

【讨论】：

【解决方案3】：

您可以尝试在jquery css中调用以下方法并分配显示：阻止div，当您专注于搜索txt时隐藏div，例如

code to demo

<style type="text/css">
  div.hidden { display: none; }
</style>

</head>

<h1>SEARCH</h1>

<input type="text" id="textSearch" name="" value="" placeholder="Input Search Value">
<input type="button" id="search" class="btn btn-primary" name="" value="Search">


<div class="hidden">
    <table>
        <caption>table title and/or explanatory text</caption>
        <thead>
            <tr>
                <th>header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
            </tr>
        </tbody>
    </table>

</div>

<script type="text/javascript">

$("#search").on("click", function(){
    $("div.hidden").css('display', 'block');
})
$("#textSearch").on("focus", function(){
     $("div.hidden").css('display', 'none');
})

</script>

【讨论】：

感谢您的帮助 Dev Joel。不幸的是，我无法让它工作。您的演示工作完美，但我似乎无法将此代码与我的代码联系起来。更具体地说，我希望在用户在我的 form_for 中输入 hits f.submit 后显示隐藏表。所以我不清楚你的输入类型=“文本”等。代码指的是什么。在我上面的视图代码中，您可以看到我的 form_for 构建器。用户添加搜索字段并点击 f.submit 后，我希望显示隐藏表中的结果。