Как спрятать ряды таблицы?

173

13 октября 2017, 16:46

Добрый день профессионалы. Как спрятать таблицу, кликая по "шапке таблицы"? Сейчас я это делаю через Javascript, а в тэг ряда таблицы вставляю

  echo '<table class="table_dep2">';
    $result = array();
    for ($i = 0; $i < $entries['count']; $i++){array_push($result,$entries[$i]["department"][0]);} $result=array_unique($result);  sort($result); 
    echo '<tr><th colspan="4">Отделы</th></tr>';
    for ($j = 0; $j < (count($result)/4)+1; $j++) {
    echo '<tr  id="hidethis">';
    echo '<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4-3].'">'.$result[$j*4-3].'</a></td>';
    echo '<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4-2].'">'.$result[$j*4-2].'</a></td>';
    echo '<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4-1].'">'.$result[$j*4-1].'</a></td>';
    echo '<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4].'">'.$result[$j*4].'</a></td>';
    echo '</tr>';
    }           
    echo '</table>';

Код javascript:

<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}
</script>

И ссылка перехода:

<a href="#null" onclick="toggle()">Показать ОТДЕЛЫ:</a>

ВОПРОС: Как только у меня генерируются ряды таблиц кодом php, то скрыть их уже не получается. Не понимаю почему, ведь тэг tr же остается всегда, и он один на все td. Может есть вообще другой способ как это сделать? спс

Answer 1

Скорее всего, Вы вызываете функцию раньше, чем определяете её.

Либо поместите js выше разметки, либо используйте такой вариант (задайте id Вашей ссылке и клик повесьте непосредственно в js, а не в разметке):

var link = document.getElementById('link'); 
link.onclick = function toggle() { 
 if( document.getElementById("hidethis").style.display=='none' ){ 
   document.getElementById("hidethis").style.display = ''; 
 }else{ 
   document.getElementById("hidethis").style.display = 'none'; 
 } 
}

<table border="1"> 
<tr id="hidethis"> 
<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4-3].'">'.$result[$j*4-3].'</a></td> 
<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4-2].'">'.$result[$j*4-2].'</a></td> 
<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4-1].'">'.$result[$j*4-1].'</a></td> 
<td><a href="http://localhost/index2.php?dep_link='.$result[$j*4].'">'.$result[$j*4].'</a></td> 
</tr> 
</table> 
<br /> 
<a href="#null" id="link">Показать ОТДЕЛЫ:</a>