Wysuwany box ze szczegółami pod tabelą.

Question

Zrobiłem tabelę do której zamieściłem dane z bazy danych poprzez PHP. Jest kilka rekordów. Chcę zrobić tak że gdy kliknę na dany rekord to wysunie się pod danym rekordem ( tym którym kliknąłem ) box z szczegółowymi informacjami itd.

Czyli jest tabelka, klikam w dany rekord wysuwa się pod nim div czyli box z informacjami... jak to mogę osiągnąć? Próbuję w JS zrobić że po kliknięciu jednego pola wysunie się ten box ale problem w tym że box wysuwa się tylko pod pierwszym rekordzie..

Kod PHP:

foreach ($query as $value) {

  /** TABELA Z REKORDAMI **/
  echo '<div class="tabela-flexbox-rekord">';
    echo '<div class="tabela-rekord-element tabela-rekord-id tabela-rekord-wys">';
      echo $value['id'];
    echo '</div>';
    echo '<div class="tabela-rekord-element confirm tabela-rekord-zrodlo tabela-rekord-wys">';
      echo $value['photos'];
    echo '</div>';
    echo '<div class="tabela-rekord-element tabela-rekord-operacja tabela-rekord-wys">';
      echo $value['title'];
    echo '</div>';
    echo '<div class="tabela-rekord-element tabela-rekord-przyna tabela-rekord-wys">';
      echo $value['textads'];
    echo '</div>';
    echo '<div class="tabela-rekord-element tabela-rekord-pusty tabela-rekord-wys">';
        echo '<a href="#" class="buttonhv">P</a>';
    echo '</div>';
  echo '</div>';
  
  /** TEN BOX Z INFORMACJAMI CO MA SIĘ WYSUWAĆ **/
  echo '<div class="tabela-flexbox-informacje">';
      echo 'Zmienna';
  echo '</div>';

}

box który ma się wysuwać to div class "tabela-flexbox-informacje"..

KOD JS:

  document.querySelector('.tabela-flexbox-rekord').addEventListener('click', function() {
      document.querySelector('.tabela-flexbox-informacje').style.display = 'block';
  });

 

Jak to mogę osiągnąć? Z góry dziękuję!

Answer 1

Moim zdaniem, querySelector dotyczy selektora css, skoro chciałbyś dostać się do div o klasie ".xxx" spróbuj z getElementsByClassName, ewentualnie getElementById('id').

Powodzenia ! :)

Comments

metoda querySelector i querySelectorAll pobierają obecnie praktycznie wszystkie typowe selektory CSS. Metoda getElementById ma tę zaletę, że jest w praktyce szybsza od querySelector gdyż atrybuty ID są w pewnym uproszczeniu indeksowane przez przeglądarkę i łatwiej może je odnaleźć na stronie.

Metoda getElementsByClassName nie jest bezpośrednio zamiennikiem querySelector('.klasa') gdyż querySelector zwraca tylko jeden element, a nie pseudotablicę jak getElementsByClassName. Jeśli do metody querySelector('id') przekażesz ID, które występuje w HTML kilka razy to i tak metoda zwróci tylko pierwszy napotkany element.

Jest jeszcze jedna ważna kwestia. Metoda getElementsByClassName w przypadku braku dopasowania jakiegokolwiek elementu do szukanej klasy zwraca pustą pseudotablicę []. Metoda querySelector i querySelectorAll zwróci w tym wypadku wartość null. Ma to znaczenie gdyby zaszła potrzeba uzależnienia jakiegoś działania od tego, czy znaleziono elementy. Pusta tablica zostanie niejawnie przekonwertowana zawsze na TRUE co może rodzić pewne problemy np. w instrukcjach IF (dlatego lepiej jest w razie czego sprawdzać właściwość length takiej pseudotablicy). W przypadku querySelectorAll wartość null jest niejawnie konwertowana na false więc wszystko działa w sposób oczekiwany.

Answer 2

metoda querySelector('selektor CSS') pobiera tylko pierwszy napotkany element, więc w Twoim wypadku pierwszy div z klasą tabela-flexbox-rekord wygenerowany przez foreach. Do kolejnych div nie podpinasz obsługi zdarzenia 'click'.

Zapoznaj się z metodą querySelectorAll, która zwraca wszystkie elementy pasujące do danego selektora CSS. Uważaj jednak, bo metoda zwraca je nie w formie tablicy [Object Array] ale w formie NodeList. Zależnie od tego co chcesz dalej z tym robić to aby przekształcić na tablicę z metodami z Array.prototype możesz użyć np. formy:

elements = [...document.querySelectorAll('selector CSS')]

 

Comments

Okej, rozumiem sprawdzę to! Dziękuję!