Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][PHP]podświetlone <tr>
Forum PHP.pl > Forum > Przedszkole
spayk
11.12.2011, 11:20:01
Mam tabele i w niej wiele <tr>
chce aby po najechaniu na jakoś linie podsweitlałą się ona ( zmieniało tło) ale tylko w tej jednej lini
Kshyhoo
11.12.2011, 11:29:59
Tak ciężko coś znaleźć na Google?
1.
[JAVASCRIPT] pobierz, plaintext 
  1. function podswWiersze(id) {
  2.   if(!document.getElementById)return;
  3.   // id - id elementu TABLE
  4.   // zainicjowanie zmiennych
  5.   // E - pobranie elementu tabeli
  6.   // i - zmienna - licznik, potrzebna w pętli for
  7.   var i,E=document.getElementById(id),tr;
  8.   // jeśli tabela o podanym id nie istnieje
  9.   // instrukcje nie zostaną wykonane
  10.   if(E&&E.tagName=='TABLE'){
  11.     // pobranie wszystkich komórek TD tabeli
  12.     tr=E.getElementsByTagName('TR');
  13.     // pętla w której do zdarzeń onmouseover i onmouseout
  14.     // każdej komórki przypisane zostają funkcje realizujące
  15.     // podświetlanie
  16.     for(i=0;i<tr.length;i++) {
  17.       tr[i].onmouseover=function() {
  18.         // po wystąpieniu zdarzenia onmouseover
  19.         // klasa CSS wiersza zostanie zmieniona na
  20.         // 'podswietlona', lecz tylko jeśli wiersz nie jest
  21.         // zaznaczony
  22.         if(this.className!='zaznaczona')
  23.           this.className='podswietlona';
  24.       }
  25.       tr[i].onmouseout=function() {
  26.         // przywrócenie normalnego stanu wiersza
  27.         if(this.className!='zaznaczona')
  28.           this.className='normalna';
  29.       }
  30.       // zaznaczanie wierszy
  31.       tr[i].onmousedown=function() {
  32.         // jeśli wiersz jest już zaznaczony, to jest
  33.         // odznaczany, w przeciwnym wypadku zostaje zaznaczony
  34.         this.className=this.className=='zaznaczona'?'normalna':'zaznaczona';
  35.       }
  36.     }
  37.   }
  38. }
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. .podswietlona {
  2.   background-color: red;
  3.   font-weight: bold;
  4.   color: white;
  5. }
  6. .zaznaczona {
  7.   background-color: blue;
  8.   font-weight: bold;
  9.   color: yellow;
  10. }
  11. .normalna {
  12.   background-color: inherit;
  13. }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <body onload="podswWiersze('tab')">
  2.  
  3. <table border="1">
  4.   <tr onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''">
  5.     <td>wiersz podświetlany z wykorzystaniem this.style.backgroundColor</td>
  6.     <td>wiersz podświetlany z wykorzystaniem this.style.backgroundColor</td>
  7.   </tr>
  8.   <tr onmouseover="this.className='podswietlona'" onmouseout="this.className='normalna'">
  9.     <td>wiersz podświetlany z wykorzystaniem this.className</td>
  10.     <td>wiersz podświetlany z wykorzystaniem this.className</td>
  11.   </tr>
  12.   <tr onmouseover="this.className='podswietlona'" onmouseout="this.className='normalna'">
  13.     <td>wiersz podświetlany z wykorzystaniem this.className</td>
  14.     <td>wiersz podświetlany z wykorzystaniem this.className</td>
  15.   </tr>
  16. </table>
  17.  
  18. <table id="tab" border="1" style="width:300px;">
  19.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  20.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  21.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  22.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  23.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  24.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  25.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  26.   <tr><td>tekst</td><td>tekst</td><td>tekst</td><td>tekst</td></tr>
  27. </table>
[HTML] pobierz, plaintext

2.
[JAVASCRIPT] pobierz, plaintext 
  1. function start() {
  2.   var el=document.getElementById('tab1').getElementsByTagName('TD');
  3.   for(var i=0;i<el.length;i++) {
  4.     el[i].onmouseover=function() {
  5.       this.style.backgroundColor='DDDDDD'
  6.     }
  7.     el[i].onmouseout=function() {
  8.       this.style.backgroundColor='EFF8FA'
  9.     }
  10.   }
  11. }
  12.  
  13. function zmKolTla(o,c ){
  14.   o.style.backgroundColor=c;
  15. }
  16. function bc1(o) {
  17.   zmKolTla(o,'DDDDDD')
  18. }
  19. function bc2(o) {
  20.   zmKolTla(o,'EFF8FA')
  21. }
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <body onload="start()">
  2.  
  3.   <table>
  4.     <tr>
  5.       <td onmouseover="this.style.background='EFF8FA'" onmouseout="this.style.background='DDDDDD'" bgColor=#dddddd>.......</td>
  6.     </tr>
  7.     <tr>
  8.       <td onmouseover="zmKolTla(this,'EFF8FA')" onmouseout="zmKolTla(this,'DDDDDD')" bgColor=#dddddd>.......</td>
  9.     </tr>
  10.     <tr>
  11.       <td onmouseover="bc2(this)" onmouseout="bc1(this)" bgColor=#dddddd>.......</td>
  12.     </tr>
  13.   </table>
  14.  
  15.   <table id="tab1">
  16.     <tr>
  17.       <td>aaaaaa</td>
  18.       <td>bbbbbb</td>
  19.     </tr>
  20.     <tr>
  21.       <td>cccccc</td>
  22.       <td>dddddd</td>
  23.     </tr>
  24.   </table>
[HTML] pobierz, plaintext
croc
11.12.2011, 12:27:56
A nie prościej tak?

[CSS] pobierz, plaintext 
  1. .myTable tr:hover {
  2.    background: #bdf;
  3. }
[CSS] pobierz, plaintext


Gdzie tabela ma nadaną klasę, w tym przypadku myTable. Teraz już wszystkie przeglądarki obsługują :hover na dowolnym elemencie, więc nie wiem po co kombinować z JavaSriptem.
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.