Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [javascript] onclick do zmiany stylu
Forum PHP.pl > Forum > Przedszkole
marcinsm
witam, mam dwa checkboxy:
  1. <input type="checkbox" name="a" onclick="document.getElementById('menu1').style.display = this.checked ? '' : 'none';" />
  2. <input type="checkbox" name="b" onclick="document.getElementById('menu2').style.display = this.checked ? '' : 'none';" />


i chciałem zrobić że po zaznaczeniu aktywują się odpowiednie wiersze w tabeli, a tebele mam taką:
  1. <tr><td>lp</td><td>imie</td><td>nazwisko</td></tr>
  2.  
  3. <tr id="menu1" style="display:none;"><td>1</td><td>Marcin</td><td>Marcinowski</td></tr>
  4. <tr id="menu1" style="display:none;"><td>2</td><td>Tomek</td><td>Tomkowski</td></tr>
  5. <tr id="menu1" style="display:none;"><td>3</td><td>Kasia</td><td>Kasowska</td></tr>
  6.  
  7. <tr id="menu2" style="display:none;"><td>1</td><td>Edyta</td><td>Edowska</td></tr>
  8. <tr id="menu2" style="display:none;"><td>2</td><td>Andrzejek</td><td>ANdrzejowski</td></tr>
  9. <tr id="menu2" style="display:none;"><td>3</td><td>Artur</td><td>Arturowski</td></tr>

z racji tego że ID moze być użyte tylko 1 raz to pojawia mi się jeden wiersz.
Próbowałem zrobić na getElementsByClass lub na getElementsByClassName ale nie ogarniam :/
Pomoże ktoś questionmark.gif
kamil4u
Cytat
Próbowałem zrobić na getElementsByClass lub na getElementsByClassName ale nie ogarniam :/

Jak próbowałeś? Generalnie musisz zrobić pętlę po tych elementach:

  1. <span class="test">test</span> <br>
  2. <span class="test">test</span> <br>
  3. <span class="test">test</span> <br>
  4. <span class="test">test</span> <br>
  5. <span class="test">test</span> <br>


[JAVASCRIPT] pobierz, plaintext
  1. var els, el, i;
  2.  
  3. els = document.getElementsByClassName('test');
  4. for( i = 0; el = els[i]; i++ ){
  5. el.style.color = 'red';
  6. }
[JAVASCRIPT] pobierz, plaintext
tzm
Ogólnie polecam zaimplementować jQuery, wtedy wyglądało by to tak:

[JAVASCRIPT] pobierz, plaintext
  1. $('.test').css("color", "red");
[JAVASCRIPT] pobierz, plaintext
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.