[HTML][CSS]Podświetlenie Opcje

[ksaw]

Witam
Mam trywialny problem, z którym jakoś nie mogę sobię poradzić
Mam dwie tabelki oparte na divach. Jak zrobić aby po najechaniu kursorem na wiersz w pierwszej tabelce podświetlił się wiersz w drugiej tabeli (równocześnie)?

[pedro84]

Możesz pokazać kod? Bo jakoś ciężko mi wyobrazić sobie głupotę pt. tabelki oparte na divach

[thomson89]

Była taka nagonka, żeby nie robić stron na tabelkach. Bo tabelki służą do przedstawiania danych tabelarycznych. Teraz będzie nagonka żeby danych tabelarycznych nie przedstawiać w div'ach

W CSS (nie działa pod IE)

[CSS] pobierz, plaintext 
div:hover { background: yellow; }
[CSS] pobierz, plaintext 

[CSS] pobierz, plaintext 
tr:hover { background: yellow; }
[CSS] pobierz, plaintext 

W JS, funkcją onmouseover lub łatwiej w jQuery funkcją .hover()

Ten post edytował thomson89 2.08.2010, 19:07:54

[ksaw]

kod jest nie ważny, może być nawet tabelka
podświetlenie potrafię zrobić
nie wiem jak zrobić aby po najechaniu na wiersz w pierwszej tabelce zaświecił się pierwszy wiersz w drugiej tabelce która znajduję się np na dole strony
tu mam problem !

[Damonsson]

Jak masz je obok siebie możesz je dać do wspólnego DIVa i jemu nadać wartość xx i xx:hover na przykład z różnym opacity.

[ksaw]

no właśnie problem jest w tym że są w zupełnie innym miejscu !

[cniak]

dodaj do w pierwszej i drugiej tabelce takie same id i powinno dzialac, nadaj im hover

[thomson89]

Nie id, a class.

[ksaw]

a może jakiś przykład ?

[thomson89]

[HTML] pobierz, plaintext 
<table>
<tr><td id="jeden" class="jeden">Tekst</td></tr>
</table>
<table>
<tr><td class="jeden">Tekst 2</td></tr>
</table>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
$('#jeden').hover(function(){
$('.jeden').css('background', 'yellow');
}),
function(){
$('.jeden').css('background', 'white');
})
 
})
[JAVASCRIPT] pobierz, plaintext 

Powinno działać.

Ten post edytował thomson89 2.08.2010, 22:48:29

[ksaw]

dzięki, ale coś nie za bardzo hula :/

[thomson89]

A bibliotekę jQuery dołączyłeś?

[ksaw]

podpiąłem bez zmian

[thomson89]

Mała literówka.

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
$('#jeden').hover(function(){	
	$('.jeden').css('background', 'yellow');
}, //tu był nawias i to powodowało błąd
function(){
	$('.jeden').css('background', 'white');
})
 
 
 
})
[JAVASCRIPT] pobierz, plaintext 

[ksaw]

ok hula
to jeszcze jedno pytanko!, a jak mam więcej wierszy np w pierwszej tabeli mam 5 i w drugiej tabeli mam 5, i teraz chciałbym aby
po najechaniu na 1-szy wiersz podświetlił się 1-szy wiersz w tabeli drugiej, 2 - 2, 3 - 3 itp.

[thomson89]

Możesz analogicznie kopiować, lub załatwić to funkcją.

[HTML] pobierz, plaintext 
<table>
<tr><td id="jeden" class="jeden">Tekst</td> <td id="dwa" class="jeden">Tekst</td> <td id="trzy" class="jeden">Tekst</td></tr>
</table>
<table>
<tr><td class="jeden">Tekst 2</td> <td class="dwa">Tekst 2</td> <td class="trzy">Tekst 2</td></tr>
</table>
[HTML] pobierz, plaintext 

I w skrypcie, kopiujesz to co jest w document ready i powielasz zmieniając id i class.

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function(){
 
$('#jeden').hover(function(){	
	$('.jeden').css('background', 'yellow');
}, 
function(){
	$('.jeden').css('background', 'white');
})
 
$('#dwa').hover(function(){	
	$('.dwa').css('background', 'yellow');
}, 
function(){
	$('.dwa').css('background', 'white');
}) 
 
 
})
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował thomson89 3.08.2010, 13:15:49

[ksaw]

domyśliłem się że można analogicznie skopiować kod
mnie bardziej interesuje rozwiązanie troszkę bardziej skomplikowane, bo przecież jak będę mieć 50 wierszy to będzie mały problem !

[everth]

Przy założeniu że tabele mają tę samą ilość wierszy:

[JAVASCRIPT] pobierz, plaintext 
tabela1 = $('#tabela1 tr');
tabela2 = $('#tabela2 tr');
 
tabela1.hover(function(){ //twoje wiersze w piersze 	
	tabela2.eq($(this).index()).addClass('highlight'); //klasa highlight w której definiujesz styl podświetlenia
function(){
	tabela2.eq($(this).index()).removeClass('highlight');
});
[JAVASCRIPT] pobierz, plaintext 

[ksaw]

nie wiem, chyba jestem jakiś upośledzony
albo oba wiersze w obydwu tabelach się podświetlają albo w ogóle nic się z nimi nie dzieje ! :/

[everth]

Ech, w skrypcie jest błąd:

[JAVASCRIPT] pobierz, plaintext 
tabela1 = $('#tabela1 tr'); //definiuje wszystkie wiersze w pierwszej tabeli (masz to na divach - nie wiem co stosujesz zamiast 'tr')
tabela2 = $('#tabela2 tr'); //jak wyżej
 
tabela1.hover(
   function(){ 
      $(this).addClass('highlight'); //podswietla najechany element w tabeli 1
      tabela2.eq($(this).index()).addClass('highlight'); // podswietla odpowiadający element w drugiej tabeli
   },
   function(){ //usuwa podświetlenie
      $(this).removeClass('highlight');
      tabela2.eq($(this).index()).removeClass('highlight');
   }
);
 
// I na odwrót
 
tabela2.hover(
   function(){ //twoje wiersze w piersze
      $(this).addClass('highlight'); //podswietla najechany element w tabeli 1
      tabela1.eq($(this).index()).addClass('highlight'); // podswietla odpowiadający element w drugiej tabeli
   },
   function(){ //usuwa podświetlenie
      $(this).removeClass('highlight');
      tabela1.eq($(this).index()).removeClass('highlight');
   }
);
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował everth 3.08.2010, 17:41:14