Показать скрытую таблицу, 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"), вы должны выбрать все скрытые таблицы. Обратите внимание, что $("div:hidden") и $("div.hidden") не совпадают.

Если таблица должна быть скрыта при загрузке страницы, добавьте класс hidden в HTML.

Часть off("click") не является обязательной и не имеет значения. Но это может помочь, если по какой-то причине вы получаете повторяющиеся события.

источник

2016-09-04 03:13:54

спасибо за помощь @max pleaner, но я не могу заставить это работать.Я проверил, чтобы убедиться, что работает javascript, и работает для других функций. Как я уже сказал, у меня нет проблем, скрывающих стол, но, похоже, они не могут показать их после нажатия кнопки поиска. Обратите внимание: результаты поиска поступают из большой базы данных, которая запрашивается. Как вы можете видеть вверху, у меня есть form_for и f.submit, которые вызывается, чтобы генерировать результаты. Это единственное, о чем я могу думать сейчас. – BlueDevilPride

поставьте оператор отладчика в событие onclick и выясните правильный код в консоли dev. –

Хорошо, дайте мне посмотреть, что я могу найти. Я тестировал другие функции 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

Спасибо за помощь Dev Joel. К сожалению, я не мог заставить это работать. Ваша демонстрация работает отлично, но я не могу показать связь с этим кодом для моего. Более конкретно, я ищу, чтобы появилась скрытая таблица, после того как пользователь вводит хиты f.submit в моем form_for. Поэтому я не понимаю, к чему относится ваш тип ввода = «текст» и т. Д. В моем коде зрения выше вы можете увидеть мой form_for builder. Когда пользователь добавит поля поиска и хиты f.submit, мне бы хотелось, чтобы результаты в скрытой таблице отображались. – BlueDevilPride

Здесь пользователь редактировать yor js и изменить

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

удачи люди

источник

2016-09-04 03:11:24 gerardoepp

Показать скрытую таблицу, onclick

ответ

Смежные вопросы