顯示隱藏的表，的onclick

我有一個隱藏的表，我想顯示用戶點擊搜索按鈕後。我在這裏跟隨了幾個例子，但似乎無法得到這個工作。我可以隱藏搜索結果，但在搜索按鈕被擊中後無法顯示它們。我究竟做錯了什麼？顯示隱藏的表，的onclick

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

來源

2016-09-04 BlueDevilPride

對方回答會工作得很好，但我認爲我傾向於使用這種方法：

做一個CSS類：
```
.hidden { display: none } 
```

使用這個JS：

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

通過使用$(e.currentTarget)您只選擇被點擊的表格，而使用$("div:hidden")您將選擇所有隱藏的表格。請注意0和$("div.hidden")是不一樣的。

如果在頁面加載時，在HTML中添加hidden類的表應該被隱藏。

的off("click")部分是可選的，可以沒有區別。但如果您因爲某些原因收到重複活動，它可以提供幫助。

來源

2016-09-04 03:13:54

感謝您的幫助@max pleaner，但我無法得到這個工作。我檢查，以確保我的JavaScript正在工作，它適用於其他功能。就像我說的，我沒有隱藏桌子的問題，但似乎無法讓他們在點擊我的搜索按鈕後顯示。請注意，搜索結果來自正在查詢的大型數據庫。正如你可以看到頂部，我有一個form_for和f.submit被點擊以生成結果。這是我現在唯一能想到的。 – BlueDevilPride

在您的onclick事件中放置了一個調試器語句，並在開發控制檯中找出正確的代碼。 –

好吧，讓我看看我能找到什麼。我測試了其他jquery和javascript函數，其他所有工作都完美無缺。我無法讓這張桌子出現。 – BlueDevilPride

你可以試試followi在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>

來源

2016-09-04 03:06:48

感謝您的幫助開發喬爾。不幸的是，我無法得到這個工作。你的演示完美地工作，但我似乎無法與這個代碼連接。更具體地說，我希望隱藏的表格出現後，用戶在我的form_for中輸入命中f.submit後。所以我不清楚你的輸入類型=「文本」等等。代碼指的是。在我上面的視圖代碼中，您可以看到我的form_for構建器。一旦用戶添加搜索字段並點擊f.submit，我希望隱藏表中的結果出現。 – BlueDevilPride

這裏人編輯尤爾js和改變

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

好運氣的人

來源

2016-09-04 03:11:24 gerardoepp

顯示隱藏的表，的onclick

回答

相關問題