Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Tabelka
Forum PHP.pl > Forum > Przedszkole
chmiello96
Z JS jestem całkowicie zielony, ale jest mi niezbędny do pewnego elementu strony.
Najłatwiej będzie mi to zaprezentować skrinami

Mamy tabelkę z komórkami. Każda z nich ma swoje id(po prawej stronie)


Gdy klikniemy na komórkę zmienia kolor, oraz powoduje otwarcie się pod tabelą formularza z ukrytą zmienną, równą 'id'.

Nie mam pojęcia o javie i proszę o pomoc.
Jeśli jestem niezrozumiały, proszę pisać.
Będę wdzięczny za miłą pomoc smile.gif
tolomei
Witaj.

Jeśli możesz to skopiuj kod HTML całej tabeli i wrzuć na JSFIDDLE.
Następnie zapisz i podaj linka tu na forum.

Pozdro.
chmiello96
http://jsfiddle.net/6G2jf/
tolomei
Co konkretnie ma się wydarzyć po kliknięciu na daną komórkę?
Ma się wyświetlić formularz?
Jak ma on wyglądać?
Czy ma być wysyłany standardowo, z przeładowaniem strony czy bez przeładowania?
Jaki ma mieć adres?
chmiello96
więc po kliknięciu na komórkę zmienia kolor
z formularzem dam sobie radę.
Chodzi o to, by móc wprowadzić w formularz ukrytą zmienną id wybranej komórki.
tolomei
JavaScript najsprawniej operuje na atrybutach znaczników.
W związku z tym proponuję Ci dodać atrybut id do każdego znacznika td, który reprezentuje konkretny dzień.
Tak jak prezentuje się to tutaj:
http://jsfiddle.net/6G2jf/1/

Teraz musimy napisać reakcję na kliknięcie na daną komórkę.
W celu uproszczenia kodu użyję biblioteki jQuery.
Pełna wersja tutaj:
http://jsfiddle.net/6G2jf/3/

Omówienie kodu:

  1. $(function(){
  2.  
  3. // wybieramy wszystkie elementy td, których id zaczyna się od "d_"
  4. // oraz przypisujemy do wszystkich obsługę zdarzenia 'click'
  5. $('table td[id^="d_"]').bind('click', function(){
  6.  
  7. // blok służy do resetowania koloru wszystkich komórek
  8. $('table td[id^="d_"]').each(function(){
  9. $(this).css('background-color', '');
  10. });
  11.  
  12. // klikniętej komórce nadajemy kolor
  13. $(this).css('background-color', 'lightgreen');
  14.  
  15. // w tym bloku wyławiamy id komórki oraz wyświetlamy w
  16. // elemencie <div id="form">
  17. var elementId = $(this).attr('id');
  18. var dzienId = elementId.split('_');
  19. $('div#form').html('Formularz o id = '+dzienId[1]+'!!!');
  20. });
  21. });


Pozdrawiam.
chmiello96
nieopisana radość z mojej strony i no po prostu bardzo Ci dziękuję smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.