Farbe einer Tabellenzelle bei onclick, onmouseover und onmouseout ändern

schecker

Erfahrenes Mitglied
Hy habe ein Problem worüber ich schon tagelang grübele. Bei einem Projekt möchte der Kunde das bei der Navigation durch einen Projektkatalog sich die Farbe der Tabellenzelle in diejenige des jeweiligen Projektes änderd. Bei den Ereignissen mouseover() und mouseout() habe ich das schon geschaft. Dort geht es auch ohne Probleme. Nur bei onclick() soll die Farbe bleiben.
Also habe ich mir eine JS Funktion geschrieben die bei onclick() aufgerifen wird:
HTML:
 onclick='javascript:projekt(<PID>,<PColor>)'
Diese Funktion macht dann folgendes
1. Erst mall alle Zellen durchwandern und alle auf die Standartfarbe setzen:
HTML:
var zellen = document.getElementById("produkte").getElementsByTagName("td");
			for (var i=0; i < zellen.length; i++) 
			{
   				zellen[i].style.backgroundColor="";
			}
und 2. Die Zelle des eben geklickten Projektes, sowie zwei feste Zellen auf die Projektfarbe setzen:
HTML:
document.getElementById("vier").style.backgroundColor=<PColor>;
document.getElementById("acht").style.backgroundColor=<PColor>;
document.getElementById(<PID>).style.backgroundColor=<PColor>;
Die festen Zellen ändert er auch (sogar im IE) aber irgenwie beim Link hat er Probleme. Beim Firefox gehts aber da muss man den Maus Zeiger sofort wegziehen sonst gehts auch net und der IE machts gleich garnicht.

Also gibt es da irgendwie noch ne andere Methode das zu realisieren?

Danke schecker
 

schecker

Erfahrenes Mitglied
Nein. Das Projekt befindet sich noch in der Entwicklung.
Aber schau dir mal das Bild an. Wenn ich jetzt über 1 gehe, soll diese Zelle z.B. Grün werden. Wenn ich mit der Maus weg gehe soll das Feld wieder Grau werden und wenn ich drauf klicke soll das Feld Grün werden und solange grün bleiben bis ich auf eine andere Zelle klicke.

Gruß schecker
 

Anhänge

  • bild1.jpg
    bild1.jpg
    17,5 KB · Aufrufe: 722

chainy

Erfahrenes Mitglied
Okay, also ich hab es wie folgt mal lokal simuliert:
HTML:
<table border="1">
	<tr>
		<td onclick="mark(this);">1</td>
		<td onclick="mark(this);">2</td>
		<td onclick="mark(this);">3</td>
		<td onclick="mark(this);">4</td>
		<td onclick="mark(this);">5</td>
	</tr>
</table>

Der JS-Code dazu:
Code:
<script type="text/javascript">
	function mark(el)
	{
		var elTr = el.parentNode, elCell = null;
		for( var i = 0; i < elTr.cells.length; i++ )
		{
			elCell = elTr.cells[i];
			elCell.style.background = '';
		}
	
		el.style.background = 'green';
	}
</script>
 

schecker

Erfahrenes Mitglied
ja so in etwa. nur brauche ich es in folgender Form:

HTML:
<table height="100" border="1">
<tr>
		<td width="30" onmouseover="wechseln(this)" onmouseout="wechseln2(this)" onclick="mark(this);">1</td>
		<td width="30" onmouseover="wechseln(this)" onmouseout="wechseln2(this)" onclick="mark(this);">2</td>
		<td width="30" onmouseover="wechseln(this)" onmouseout="wechseln2(this)" onclick="mark(this);">3</td>
		<td width="30" onmouseover="wechseln(this)" onmouseout="wechseln2(this)" onclick="mark(this);">4</td>
	    <td width="30" onmouseover="wechseln(this)" onmouseout="wechseln2(this)" onclick="mark(this);">5</td>
  </tr>
</table>

Code:
<script language="javascript">
	function mark(el)
	{
		var elTr = el.parentNode, elCell = null;
		for( var i = 0; i < elTr.cells.length; i++ )
		{
			elCell = elTr.cells[i];
			elCell.style.background = '';
		}
	
		el.style.background = 'green';
	}
function wechseln(id)
{
	if(id.style.backgroundColor=="")
		id.style.backgroundColor='red';
	else
		id.style.backgroundColor="";
}
function wechseln2(id)
{
	if(id.style.backgroundColor!="")
		id.style.backgroundColor="";
	else
		id.style.backgroundColor='red';
}
</script>

Die wechseln-Funktionen müssen getrennt sein, weil da noch was anders passiert, was aber hier nicht dazugehört.

Gruß schecker.
 

chainy

Erfahrenes Mitglied
Dann versuch es mal so:
HTML:
<table height="100" border="1">
	<tr>
		<td width="30" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)" onclick="mark(this);">1</td>
		<td width="30" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)" onclick="mark(this);">2</td>
		<td width="30" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)" onclick="mark(this);">3</td>
		<td width="30" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)" onclick="mark(this);">4</td>
	  <td width="30" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)" onclick="mark(this);">5</td>
  </tr>
</table>

JS-Code:
Code:
<script language="javascript">
	function mark(el)
	{
		var elTr = el.parentNode, elCell = null;
		for( var i = 0; i < elTr.cells.length; i++ )
		{
			elCell = elTr.cells[i];
			elCell._current = false;
			elCell.style.background = '';
		}
	
		el.style.background = 'green';
		el._current = true;
	}
	
	function wechseln(el, col)
	{
	  col = col || '';
		if( typeof(el._current) == 'undefined' || el._current !== true  ) 
			el.style.backgroundColor = col;
	}
</script>
 

M*I*B

Grünschnabel
Hallo liebe Leute,

ich weis, dieser Thread ist schon uralt. Aber er trifft genau das, was ich gerade versuche... Vielleicht hat einer von euch die Lösung? Ich bin da gerade zu blöd zu...

Code:
<script src="jquery.js" type="text/javascript"></script>
<script>
    function play_stream(stream,el) {
        $.get('s'+stream+'.html', function(data) {
            $('#channel').html(data);   
            var audio = document.getElementById("player");
            audio.volume = 0.1;
        })
        var elTr = el.parentNode, elCell = null;
        for(var i = 0; i < elTr.cells.length; i++) {
            elCell = elTr.cells[i];
            elCell.style.background = '';
            elCell._current = false;
        }
        el.style.background = 'green';
        el._current = true;
    }
    function wechseln(el, col) {
      col = col || '';
        if( typeof(el._current) == 'undefined' || el._current !== true  )
            el.style.backgroundColor = col;
    }
</script>

.......

<td onclick="play_stream('1',this)" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)">
...
<td onclick="play_stream('7',this)" onmouseover="wechseln(this, 'red')" onmouseout="wechseln(this)">

Ok... Wie man sieht, habe ich das in ein vorhandenes Script eingebaut. EIgentlich tut es auch das was es soll, aber nur fast. MouseOver/Out funktioniert einwandfrei, ebenso wie das Setzen der Farbe bei OnClick. Aber was nicht geht ist, das bei Click auf eine andere Tabellenzeile die vorher gefärbte Zeile zurückgesetzt wird.

(siehe auch STEAMRADIO)

Das ist bestimmt nur eine Kleinigkeit, aber ich sehe es es einfach nicht *grummel*

DLzG
Micha
 

Neue Beiträge