2011-02-07 2 views
0

Я пытаюсь скрыть внутреннюю таблицу с помощью JQuery, где элемент, который вызывает скрытие, находится в родительской таблице. Вот мой код:скрытие внутренних таблиц с помощью JQuery

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
$(function() { 
    $(".collapsible").click(function(event) { 

     event.preventDefault(); 

     inner = $(this).find(".inner"); 



     if($(inner).is(":visible") == true) { 

      alert("hiding"); 

      $(inner).hide("slow"); 

     } 

     else { 

      alert("showing"); 

      $(inner).show("slow"); 

     } 

    }); 

    $(".inner").each(function(index, element) { 

     $(this).hide(0); 

    }); 
}); 
</script> 

<table class='outer'> 
<tr><td><a class='collapsible' href='#'>click here</a></td></tr> 
<tr><table class='inner'> 
<tr><td>thing</td></tr><tr><td>another thing</td></tr> 
</table> 
</table> 
<table class='outer'> 
<tr><td><a class='collapsible' href='#'>click here</a></td></tr> 
<tr><table class='inner'> 
<tr><td>something else</td></tr><tr><td>another something else</td></tr> 
</table> 
</table> 
</body> 
</html> 

Кто-нибудь знает, почему нажатие на «нажмите здесь» не сделает внутреннюю презентацию таблицы? Заранее спасибо

+0

Merged ваших счетов; пожалуйста, рассмотрите регистрацию! – Will

ответ

0

Потому что .find() ищет в пределах .collapsible якорь. Вы должны подойти к родительской таблице первым, чтобы правильно использовать .find():

$(this).closest("table.outer").find("table.inner"); 

Ваш весь код может быть упрощена:

$(function() { 
    $(".collapsible").click(function(event) { 
     event.preventDefault(); 
     $(this).closest("table.outer").find("table.inner").toggle('slow'); 
    }); 

    $(".inner").hide(); 
}); 
+0

Я до сих пор не получаю таблицу для показа с дополнениями к моему коду. Я написал другой метод для попытки скрыть скрытые внутренние таблицы, но он также не работает. – GotSomeQuestions

+0

@GotSomeQuestions - еще одна проблема заключается в том, что внутренняя таблица должна быть в ''. Также см. Мой обновленный код. –

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