Forum PHP.pl

Witam

Chcę zrobić tabelkę która standardowo ma kolor1 po najechaniu ma kolor2 a po kliknięciu ma mieć kolor3 i w tym kolorze zostać póki nie zostanie kliknięta druga tabelka pod spodem.

onmouseover i onmouseout bez problemu w momencie kliknięcia też zmienia się kolor ale po zjechaniu z elementu wraca do poprzedniego.

Jak temu zapobiec?

[PHP] pobierz, plaintext 
function ustaw(t,co) 
{
var test = document.getElementById("tabela1");      
if(co==0)
{
test.className = "table";
}
if(co==1)
{
test.className = "tableHover";
}
if(co==2)
{
test.className = "tableClick";
}
}
 
<table width="282" height="52" border="0" class="table"  id="tabela1"
	onmouseover="ustaw(this,1);"
	onclick="ustaw(this,2);"
	onmouseout="ustaw(this,0);">
 
<table width="282" height="52" border="0" class="table"  id="tabela2"
	onmouseover="ustaw(this,1);"
	onclick="ustaw(this,2);"
	onmouseout="ustaw(this,0);">
 
[PHP] pobierz, plaintext 

Jak zatrzymać kolor po zdarzeniu OnClick?

A jak możnabyłoby to rozwiązać jeżeli tabelka by tworzyła się w pętli?

Coś podobnego ale w jquery http://jsbin.com/esero3

Usuń sobie zdarzenie onmouseout z obu znaczników table, ponieważ w nim przypisujesz tabelce ponownie klasę 'table'.
Poza tym, taka rada na przyszłość, staraj się pracować raczej na div'ach niż na tabelach.

Ten post edytował bastard13 25.07.2010, 11:30:00

A skąd wiesz do czego mu to? Może chce przedstawić dane tabelaryczne? Skoro tworzy tabelkę w pętli (lub chce) to tym raczej nie zrobi strony.

Nie wiem, do czego jest mu to potrzebne, ale nie widzę przeszkód żeby na divach zbudować tabelę, problemem nie jest nawet zrobienie tego w pętli.
Jeżeli problem wymaga koniecznego zastosowania tabel, to niech przy nich zostanie, ale jeżeli może je zastąpić divami, to lepiej nabierać dobrych przyzwyczajeń(IMG:style_emoticons/default/smile.gif)

Chyba sobie żartujesz, dane tabelaryczne na divach?? Wybacz ale to jest właśnie typowe myślenie ludzi, którzy się gdzieś naczytali, że tabelki to przeżytek i trzeba ich unikać, a nic bardziej błędnego. Tabelek nie należy używać do budowania struktury strony, tylko do danych tabelarycznych. Dobre przyzwyczajenie to używać znaczników zgodnie z ich przeznaczeniem <h1>, <h2>... do nagłówków, <ul> dla list nieuporządkowanych, i <table> dla danych tabelarycznych, a nie wpychanie wszędzie <div> i setki klas...bo to jest właśnie złe przyzwyczajenie

Co do problemu autora to dla efektów takich jak zmiana koloru po najechaniu myszką służy css :hover,
co do kliknięcia to musisz zrobić tak, że po kliknięciu najpierw przywraca tabelkom klasę, reprezentującą stan przed kliknięciem i potem ustawia klasę aktywną dla tabelki klikniętej.

Faktycznie, nie pomyślałem, nim napisałem:)

Mógłbyś opisać na moim przykładzie, gdyż próbuje ale coś nie wychodzi mi tak jak powinno.

Usuń akcję onmouseout, ponieważ w niej przywracasz pierwotną klasę tabelki.

Ok. Ale co w przypadku gdy najadę na daną tabelę a nie kliknę? Nie wróci do stanu standardowego. Jak to rozwiązać wtedy?

To nie usuwaj akcji onmouseout tylko przerób if'a, który się wtedy wywołuje w ten sposób:

[HTML] pobierz, plaintext 
if(co==0)
{
if(test.className == "tableClick")
return;  //wychodzi jeżeli już kliknąłeś w tabelkę i ustawiłeś jej klasę tableClick
test.className = "table";
}
[HTML] pobierz, plaintext 

przeanalizuj sobie ten prosty przykład(skopiuj kod, zapisz do pliku i odpal):

[HTML] pobierz, plaintext 
<style type="text/css">
table
{
	border: solid #000000 1px;
	width: 200px;
	height: 100px;
}
table:hover
{
	border: solid #ff0000 1px;
}
table.active
{
	border: solid #ff00aa 2px;
}
</style>
<script type="text/javascript">
function activate(id)
{
	for(i=1;i<=3;++i)
	{
		document.getElementById('table_'+i).className = '';
	}
	document.getElementById(id).className = 'active';
}
</script>
<div>
	<table cellpadding="0" cellspacing="0" id="table_1" onclick="activate(this.id)">
		<tr>
			<td>Tabelka 1</td>
		</tr>
	</table>
</div>
<div>
	<table cellpadding="0" cellspacing="0" id="table_2" onclick="activate(this.id)">
		<tr>
			<td>Tabelka 2</td>
		</tr>
	</table>
</div>
<div>
	<table cellpadding="0" cellspacing="0" id="table_3" onclick="activate(this.id)">
		<tr>
			<td>Tabelka 3</td>
		</tr>
	</table>
</div>
[HTML] pobierz, plaintext 

1. standardowo tabelka ma obrys czarny
2. po najechaniu myszką - obrys czerwony
3. po kliknięciu - obrys pomarańczowy
- efekt po najechaniu myszką można łatwo ustawić przez css :hover
- co do kliknięcia to posługujemy się tu nadawaniem klasy .active, która reprezentuje stan aktywny, czyli ten z obrysem pomarańczowym, po kliknięciu na jakąś tabelę, wpierw pętlą for() usuwamy klasy przypisane do tych tabel, następnie dla tabeli klikniętej ustawiamy klasę aktywną

Ten post edytował tehaha 26.07.2010, 00:35:59