Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][html] Kolumna tabeli i pole typu checkbox
Forum PHP.pl > Forum > Przedszkole
S_Olewniczak
Chcę zrobić w moim formularzu listę wielokrotnego wyboru w tabelce. Chciałem ułatwić użytkownikom życie i napisać taki skrypt, który zaznaczałby okienko wyboru, kiedy użytkownik kliknie w dowolne miejsce wiersza tabeli i jednocześnie wiersz tabeli zmieniałby kolor. Próbowałem w JavieScript, ale w tej dziedzinie jestem zupełnie początkujący. Czy ktoś ma może jakiś pomysł jak to zrobić?
lord_t
Podpowiedź:

  1. <script type="text/javascript">
  2. <!--
  3. function fun(id,thys){
  4. if(document.getElementById(id).checked)
  5. {
  6. document.getElementById(id).checked=false;
  7. thys.style.background='white';
  8. }
  9. else
  10. {
  11. document.getElementById(id).checked=true;
  12. thys.style.background='blue';
  13. }
  14. }
  15.  
  16. function fun2(thys){
  17. id='z'+thys.id;
  18. if(thys.checked)
  19. document.getElementById(id).style.background='blue';
  20. else
  21. document.getElementById(id).style.background='white';
  22. }
  23.  
  24. //-->


  1. <tr><td><input type='checkbox' name='x[]' id='y1' onclick='fun2(this)' /></td><td id='zy1' onclick='fun("y1",this);'>jakiś tekst</td></tr>
  2. <tr><td><input type='checkbox' name='x[]' id='y2' onclick='fun2(this)' /></td><td id='zy2' onclick='fun("y2",this);'>lorem ipsum</td></tr>
  3. <tr><td><input type='checkbox' name='x[]' id='y3' onclick='fun2(this)' /></td><td id='zy3' onclick='fun("y3",this);'>kolejne wypociny</td></tr>
woj_tas
A ja polecam do tego jquery:

  1. $(document).ready(
  2. function(){
  3. $("tr").click(
  4. function(){
  5. var input = $(this).children().find("input");
  6. if(input.attr("checked") == true){
  7. input.attr("checked", false);
  8. $(this).removeClass("zaznaczony");
  9. }else{
  10. input.attr("checked", true);
  11. $(this).addClass("zaznaczony");
  12. }
  13. }
  14. );
  15. }
  16. );
S_Olewniczak
Dziękuję za pomoc, ale tej odpowiedzi zadałem sobie takie pytanie:”Czy można w JavieScript zrobić coś takiego, żeby wybierać dane z bazy danych MySQL przez PHP w pętli while , wyświetlać przy każdym rekordzie okienko typu checkbox, które dałoby się wybrać jak w skrypcie lord_t i na dodatek, żeby rekordy były wyświetlane w dwóch kolorach na zmianę dla lepszej czytelności?” PHP trochę znam i umiem wybierać rekordy z bazy danych MySQL, natomiast dopiero zaczynam naukę w JavieScript i moja wiedza na ten temat ogranicza się tylko do dostosowywania skryptów do własnych potrzeb i pisania bardzo prostych własnych. Czy ktoś może mi pomóc?
lord_t
Oczywiście, żeby się dało. Poczytaj o Ajax, moje propozycje:
-> advAJAX
-> jQuery (to cały framework, ale ma też zaimplementowanego ajaxa)

Co do JavaScriptu to polecam na początek: ferrante.pl
S_Olewniczak
lord_t od dwóch dni dostosowuję ten skrypt do swoich potrzeb,wszystko działa dobrze gdy chcę wybrać jakaś pozycję mogę kliknąć w całym wierszu, żeby zaznaczyć pozycje z menu, ale gdy klikam na sam kwadrat nic się nie dzieje. Czy Ty lub ktoś inny może mi pomóc? Mam jeszcze jedno pytanie, czy w Twoim skrypcie można zrobić coś takiego, że zaznaczone wiersze tabeli zmieniałyby kolor z niebieskiego na jakiś inny po najechaniu myszką?
lord_t
Sprawdzałem to zaznaczanie checkboxów na FF2, Operze i IE7 i wszędzie działało, to nie wiem.


Co do podświetlania to przeanalizuj sobie zmiany:

  1. <script type="text/javascript">
  2. <!--
  3. function fun(id,thys){
  4. if(document.getElementById(id).checked)
  5. {
  6. document.getElementById(id).checked=false;
  7. thys.style.background='';
  8. }
  9. else
  10. {
  11. document.getElementById(id).checked=true;
  12. thys.style.background='blue';
  13. }
  14. }
  15.  
  16. function fun2(thys){
  17. id='z'+thys.id;
  18. if(thys.checked)
  19. document.getElementById(id).style.background='blue';
  20. else
  21. document.getElementById(id).style.background='';
  22. }
  23. //-->
  24.  
  25. <style type="text/css">
  26. /* <![CDATA[ */
  27. .w:hover{
  28. background:orange;
  29. }
  30.  
  31. /* ]]> */


  1. <tr class="w"><td><input type='checkbox' name='x[]' id='y1' onclick='fun2(this)' /></td><td id='zy1' onclick='fun("y1",this);'>jakiś tekst</td></tr>
  2. <tr class="w"><td><input type='checkbox' name='x[]' id='y2' onclick='fun2(this)' /></td><td id='zy2' onclick='fun("y2",this);'>lorem ipsum</td></tr>
  3. <tr class="w"><td><input type='checkbox' name='x[]' id='y3' onclick='fun2(this)' /></td><td id='zy3' onclick='fun("y3",this);'>kolejne wypociny</td></tr>


UWAGI:
-nie działa dla IE (sprawdzałem na 7), ale bodajże tu jest rozwiązanie tego: http://www.xs4all.nl/~peterned/csshover.html
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.