隠しテーブルを表示するonclick

ユーザーが検索ボタンをクリックした後に表示したい隠しテーブルがあります。私はここでいくつかの例を追ってきましたが、これを動作させるようには見えません。結果を非表示にすることはできますが、検索ボタンを押した後に表示させることはできません。私は間違って何をしていますか？あなたがfollowiを試すことができます隠しテーブルを表示する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")と$("div.hidden")は同じではありません。

ページが読み込まれるときに表を非表示にする場合は、HTMLにhiddenクラスを追加します。

off("click")部分は任意であり、違いはありません。しかし、何らかの理由で重複したイベントが発生している場合は、役立ちます。

出典

2016-09-04 03:13:54

あなたの助けてくれてありがとう@max pleaner、しかし私はこれを動作させることはできません。私は自分のjavascriptが動作していることを確認するためにチェックし、それは他の機能のために働く。私が言ったように、私はテーブルを隠すことに問題はないが、検索ボタンを押した後にそれらを表示するように見えない。検索結果は、照会されている大規模データベースからのものであることに注意してください。あなたが上を見ることができるように、私は結果を生成するためにクリックされているform_forとf.submitを持っています。それは私がこの時点で考えることができる唯一の事です。 – BlueDevilPride

あなたのonclickイベントにデバッガーステートメントを入れて、デベロッパーコンソールに正しいコードを見つけてください。 –

大丈夫私が何が見つかるか見てみましょう。私は他のjquery関数とjavascript関数をテストし、他のすべては完全に機能します。私はこの表を表示することができません。 – BlueDevilPride

jQueryのCSSのNGメソッドの呼び出しと表示を割り当てる：DIVをブロックし、あなたが検索TXTに焦点を当てたときの例

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>

ため、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

あなたの助けに感謝Dev Joel。残念ながら、私はこれを動作させることができませんでした。あなたのデモは完全に動作しますが、私はこのコードとの接続を私のものにすることはできません。具体的には、ユーザが私のform_forにヒットf.submitを入力した後に、隠しテーブルを表示させたいと考えています。だから私はあなたの入力タイプ= "テキスト"など、コードが参照しているかは不明です。上のビューコードでは、私のform_forビルダーを見ることができます。ユーザーが検索フィールドを追加してfmitをヒットしたら、隠しテーブルの結果が表示されます。 – BlueDevilPride

ここで男性編集yor jsと変更

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

幸運の男

出典

2016-09-04 03:11:24 gerardoepp

隠しテーブルを表示するonclick

答えて

関連する問題