Question

我有一个隐藏的表格，我想在用户点击搜索按钮后显示该表格。我在这里做了几个例子，但似乎无法让这个工作。我可以隐藏结果，但在搜索按钮被点击后无法显示结果。我做错了什么？

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();
});

Answer 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")部分是可选的，可能没什么区别。但如果由于某种原因你得到重复的事件，它会有所帮助。

Answer 2

您可以在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>

Answer 3

此处男子编辑yor js并更改

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

好运男人

显示隐藏的表格，点击

3 个答案: