Forum PHP.pl > [JavaScript]Podświetlenie okna tabeli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Podświetlenie okna tabeli - problem

Makciek

18.10.2009, 18:33:02

Witam!
Mam tabelę, do której dane są pobierane z bazy i chcę żeby po najechaniu na pole tabeli się ono podświetlało.
To kawałek kodu, który powinien to zrobić, no ale nie robi :/:

[HTML] pobierz, plaintext 
$liczba = 1;
$allpodkarpackie = mysql_query("SELECT * FROM `podkarpackie`"); 
while($rower = mysql_fetch_assoc($allpodkarpackie)){
echo '<div id="ider'.$liczba.'" onMouseOver="var diver = document.getElementById(ider'.$liczba.'); 
      diver.style=\'background-color: #838B8B;\'" 
      onMouseOut="var diver = document.getElementById(ider'.$liczba.'); 
      diver.style=\'background-color: #FFFFFF;\'"
      ><tr> <td>'.$rower['nazwa'].'</td> <td>'.$rower['miasto'].'</td> <td>'.$rower['adres'].'</td> 
  <td>'.$rower['tel'].'</td>  <td>'.$rower['mail'].'</td> <td>'.$rower['www'].'</td></tr></div>';
  $liczba++;
}
[HTML] pobierz, plaintext

Z góry dziękuję za pomoc

Edit
same dane się wyświetlają, ale nie podświetlają po najechaniu :/

Max Damage

18.10.2009, 19:52:16

Nie masz nawet znacznika table. Nie mieszaj kodu. Taki szybki przykład, pod IE trzeba poprawić:

[JAVASCRIPT] pobierz, plaintext 
<script language="javascript">
function  aaa(){
	var x = document.getElementById("tabela");
	for(var i=0; i<x.rows.length; i++)
		for(var j=0; j<x.rows[0].cells.length; j++) {
			x.rows[i].cells[j].addEventListener("MouseOver",function(){this.style.backgroundColor="#838B8B";},false);
			x.rows[i].cells[j].addEventListener("MouseOut",function(){this.style.backgroundColor="#FFFFFF";},false);
		}
}
 
window.onload=aaa;
</script>
</head>
<body>
<table id="tabela">
	<tr>
  	<td>A</td><td>B</td>
  </tr>
  <tr>
  	<td>C</td><td>D</td>
  </tr>
</table>
</body>
[JAVASCRIPT] pobierz, plaintext

Makciek

19.10.2009, 21:21:12

mam znaczniki tabeli, ale nie dałem całego kodu,

thx za przykład

patryk9200

19.10.2009, 22:16:48

a może skorzystaj z stylów? poczytaj o CSS....
możesz to zrobić np. tak:

na początku w nagłówku <head> wpisz:

<style type="text/css">
#tabela {
background-color: red;
}
#tabela:hover {
background-color: green;
}
</style>

powinno zadziałać i usuń JS.

tu mam też coś co się może Tobie przydać http://webmade.org/porady/pole-tekstowe-input-html.php
tylko zamiast do inputa zastosuj do do tabelki, czy div'a.

Radeko

20.10.2009, 22:10:28

Style są lżejsze, ale IE 6 obsługuje tylko :hover do elementów a, więc w IE 6 ten sposób nie będzie działać.
Proponuję skorzystać z hacków. Jest tego w google pełno.

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.