2016-02-26 2 views
0

У меня есть этот жерех и HTML код:Отображение '.hidden' элементы с помощью Jquery

<asp:Repeater ID="PervousResultsList" runat="server" EnableViewState="False"> 
     <ItemTemplate> 
      <div class="row1"> 
       <table style="cursor: pointer; width: 100%"> 
        <tr> 
         <td rowspan="4"> 
          <asp:Image ID="Image1" ImageUrl="~/Images/pushpinred.png" runat="server" Width="32" 
           Height="32" /></td> 
        </tr> 
        <tr> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td rowspan="7"> 
          <input type="button" class="toggleRow" value="B" style="height: 30px; position: relative; float: left;" /> 
         </td> 
        </tr> 
        <tr> 
         <td>text:</td> 
         <td rowspan="4"> 
          <h1 style="color: gray"><%# Eval("Text") %></h1> 
         </td> 
        </tr> 
        <tr class="hidden"> 
         <td>text:</td> 
         <td><%# Eval("Text") %></td> 
        </tr> 
        <tr class="hidden"> 
         <td>X:</td> 
         <td><%# Eval("Lon") %></td> 
        </tr> 
        <tr class="hidden"> 
         <td>Y:</td> 
         <td><%# Eval("Lat") %></td> 
        </tr> 
        <tr> 
       </table> 
      </div> 
     </ItemTemplate>  
    </asp:Repeater> 

Javascript код:

 $('.toggleRow').on('click', function() { 
      $(this).closest('table').children('.hidden').show(); 

      return false; 
     }); 

Когда обрешетка с классом toggleRow щелкнул Javascript уволили, но я не получаю любой результат (т. е. я ожидаю, что скрытая строка будет отображаться, но не).

Любая идея, почему?

+0

Try '$ ('TR') toggleClass ('скрытый'.).' – Azim

+1

Может быть, я что-то пропустил, но я не вижу какой-либо элемент с классом toggleRow в коде! –

+0

, если вы имеете в виду эту кнопку # # btnToggleRow, ваш клик неверен. – guradio

ответ

0

Поскольку у вас есть table и tr, даже если вы не создаете tbody браузера поместят все tr элементов в tbody, так что ваш селектор $(this).closest('table').children('.hidden').show(); не сможет найти tr как дети умелого.

Так что попробуйте

$(this).closest('table').find('tr.hidden').show(); 

Вы также должны добавить toggleRow класс к кнопке

<input type="button" id="btnToggleRow" value="B" style="height: 30px; position: relative; float: left;" class="toggleRow"/> 
+0

Я не понял, почему у меня есть tr.hidden вместо .hidden? Не могли бы вы объяснить его более правильно? – Michael

+0

@ Майкл мог иметь скрытый ввод с классом, который скрывал бы его, если вы не укажете 'tr.hidden' таким образом, только tr с скрытым классом будет отображаться – guradio

+0

Вы можете удалить tr в tr.hidden, если хотите. Это будет более конкретным. Реальная проблема заключается в функции детей. Заменить с помощью find. –

0

Для отображения строки, которые скрыты под использование кода.

$('.toggleRow').on('click', function() { 
    $('.hidden').css("display","block"); 
    return false; 
}); 
Смежные вопросы