Forum PHP.pl

Witam
Mam trywialny problem, z którym jakoś nie mogę sobię poradzić (IMG:style_emoticons/default/smile.gif)
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)?

Możesz pokazać kod? Bo jakoś ciężko mi wyobrazić sobie głupotę pt. tabelki oparte na divach (IMG:style_emoticons/default/winksmiley.jpg)

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 (IMG:style_emoticons/default/haha.gif)

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

kod jest nie ważny, może być nawet tabelka (IMG:style_emoticons/default/smile.gif)
podświetlenie potrafię zrobić (IMG:style_emoticons/default/exclamation.gif)
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 (IMG:style_emoticons/default/smile.gif)
tu mam problem !

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.

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

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

Nie id, a class.

a może jakiś przykład ? (IMG:style_emoticons/default/smile.gif)

[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

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

A bibliotekę jQuery dołączyłeś? (IMG:style_emoticons/default/biggrin.gif)

podpiąłem (IMG:style_emoticons/default/smile.gif) bez zmian

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 

ok hula (IMG:style_emoticons/default/smile.gif)
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.

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

domyśliłem się że można analogicznie skopiować kod (IMG:style_emoticons/default/smile.gif)
mnie bardziej interesuje rozwiązanie troszkę bardziej skomplikowane, bo przecież jak będę mieć 50 wierszy to będzie mały problem !

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 

nie wiem, chyba jestem jakiś upośledzony (IMG:style_emoticons/default/winksmiley.jpg)
albo oba wiersze w obydwu tabelach się podświetlają albo w ogóle nic się z nimi nie dzieje ! :/

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