[JavaScript][html] Kolumna tabeli i pole typu checkbox Opcje

[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ź:

[HTML] pobierz, plaintext 
<script type="text/javascript">
<!--
function fun(id,thys){
 if(document.getElementById(id).checked)
  {
   document.getElementById(id).checked=false;
   thys.style.background='white';
  }
 else
  {
   document.getElementById(id).checked=true;  
   thys.style.background='blue';
   }
}  
 
function fun2(thys){
 id='z'+thys.id;
 if(thys.checked) 
   document.getElementById(id).style.background='blue';  
 else
   document.getElementById(id).style.background='white';
}
 
//-->
</script>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<table>
<tr><td><input type='checkbox' name='x[]' id='y1' onclick='fun2(this)' /></td><td id='zy1' onclick='fun("y1",this);'>jakiś tekst</td></tr>
<tr><td><input type='checkbox' name='x[]' id='y2' onclick='fun2(this)' /></td><td id='zy2' onclick='fun("y2",this);'>lorem ipsum</td></tr>
<tr><td><input type='checkbox' name='x[]' id='y3' onclick='fun2(this)' /></td><td id='zy3' onclick='fun("y3",this);'>kolejne wypociny</td></tr>
</table>
[HTML] pobierz, plaintext 

[woj_tas]

A ja polecam do tego jquery:

[HTML] pobierz, plaintext 
$(document).ready(
  function(){    
  $("tr").click(
    function(){
      var input = $(this).children().find("input");
      if(input.attr("checked") == true){
        input.attr("checked", false);
        $(this).removeClass("zaznaczony");
      }else{
        input.attr("checked", true);
        $(this).addClass("zaznaczony");
      }
    }
  );
  }
);
[HTML] pobierz, plaintext 

Ten post edytował woj_tas 21.04.2008, 19:34:07

[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:

[HTML] pobierz, plaintext 
<script type="text/javascript">
<!--
function fun(id,thys){
if(document.getElementById(id).checked)
{
document.getElementById(id).checked=false;
thys.style.background='';
}
else
{
document.getElementById(id).checked=true;
thys.style.background='blue';
}
}
 
function fun2(thys){
id='z'+thys.id;
if(thys.checked)
document.getElementById(id).style.background='blue';
else
document.getElementById(id).style.background='';
}
//-->
</script>
 
<style type="text/css">
/* <![CDATA[ */
.w:hover{
 background:orange; 
}
 
/* ]]> */
</style>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<table>
<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>
<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>
<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>
</table>
[HTML] pobierz, plaintext 

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

Ten post edytował lord_t 25.04.2008, 09:11:10