✔ Tabellenzeilen und -zellen Highlight

ZodiacXP

ZodiacXP

Erfahrenes Mitglied
ich habe :
Code: 
function tableOver(theRow, newColor)
{
	var theCells = null;

	if (typeof(document.getElementsByTagName) != 'undefined') {
		theCells = theRow.getElementsByTagName('td');
	} else if (typeof(theRow.cells) != 'undefined') {
		theCells = theRow.cells;
	} else {
		return false;
	}

	var CellsCount  = theCells.length;
	var domDetect = false;

	if (typeof(window.opera) == 'undefined' && typeof(theCells[0].getAttribute) != 'undefined') {
		domDetect = true;
	}

	if (newColor) {
		var i = null;
		if (domDetect) {
			for (i = 0; i < CellsCount; i++) {
				theCells[i].setAttribute('bgcolor', newColor, 0);
			}
		} else {
			for (i = 0; i < CellsCount; i++) {
				theCells[i].style.backgroundColor = newColor;
			}
		}
	}

    return true;
}

und ich habe

Code: 
function cellOver(theCell, newColor)
{
	var domDetect = false;

	if (typeof(window.opera) == 'undefined' && typeof(theCell.getAttribute) != 'undefined') {
		domDetect = true;
	}

	if (newColor) {
		if (domDetect) {
				theCell.setAttribute('bgcolor', newColor, 0);
		} else {
				theCell.style.backgroundColor = newColor;
		}
	}

    return true;
}

Das geile kommt noch. Ich hab eine einfache Tabelle mit:

Code: 
<tr onMouseover="tableOver(this, '1E3224');" onMouseOut="tableOver(this, '161616');">
	<td align="center" onMouseover="cellOver(this, '30503A');" onMouseout="cellOver(this, '1E3224');">bla</td>
	<td>blub</td>
</tr>

Die Zeile wird ordentlich "gehighlighted". Aber wenn man über die Zelle geht und da den (etwas helleren) Highlight auslöst kriegt man die Farbe nich mehr weg. Am besten testet man es bei sich mal ;) Dann seht ihr den komischen Effekt.
Wodran um alles in der Welt liegt denn sowas?
 
Wenn du über die Zelle gehst, feuert ebenfalls das mouseout in <tr>... deswegen bleibt der Effekt wirkungslos.

Versuche, die Farbänderung in den Zellen etwas zeitverzögert auszuführen... dann sollte es hinhauen.
 
Hab ich auch schon gedacht. Aber wenn man innerhalb der Zeile aus der Zelle geht behält die trotzdem die Farbe. Das merkt man dann wenn man die Zeile verlässt während man schon aus der Zelle raus is.
 
Zuletzt bearbeitet:
Probiers mal hiermit:
Code: 
function cellOver(theCell, newColor)
{
	if (newColor) 
	    {
	    
	        if(!theCell.id)
	            {
	                arrCells=document.getElementsByTagName('td');
	                for(i=0;i<document.getElementsByTagName('td').length;++i)
	                    {
	                        document.getElementsByTagName('td')[i].id='c_'+i;
	                    }
	            }
	        
	        window.setTimeout("document.getElementById('"+theCell.id+"').style.backgroundColor='#"+newColor+"'",10);
	    }
}
 
Auch wenn ich den ganzen eine ID zuweise und das Zeitversetzt mach. Es bleibt leider beim alten Fehler :(

Würd da nur stehen das in tableOver() die Hintergrundfarbe der <tr> geändert wird würd ichs ja verstehen. Aber da ich da schon jede einzelne <td> änder versteh ich das nicht. Vor allem wenn man innerhalb der Zeile aus der Zelle geht. Sowas habbich echt noch nie gesehen
 
Keine Ahnung, was du da probiert hast... mit meinem Vorschlag sieht das.... zumindest bei mir, anders aus.

Vielleicht schreibst du einfach mal alles auf, was du gern hättest, dass es passiert(möglicherweise reden wir aneinander vorbei).
 
Hm. Also es soll ein Highlight über eine ganze Zeile gehen und zusätzlich ein (etwas helleres) Highlight in den Zellen selbst noch mal sein.
 
Unendliche Geschichte:

Code: 
<html>
<body bgcolor="#000000" text="#FFFFFF">
<script type="text/javascript">
<!--
function tableOver(theRow, newColor)
{
	var theCells = null;

	if (typeof(document.getElementsByTagName) != 'undefined') {
		theCells = theRow.getElementsByTagName('td');
	} else if (typeof(theRow.cells) != 'undefined') {
		theCells = theRow.cells;
	} else {
		return false;
	}

	var CellsCount  = theCells.length;
	var domDetect = false;

	if (typeof(window.opera) == 'undefined' && typeof(theCells[0].getAttribute) != 'undefined') {
		domDetect = true;
	}

	if (newColor) {
		var i = null;
		if (domDetect) {
			for (i = 0; i < CellsCount; i++) {
				theCells[i].setAttribute('bgcolor', newColor, 0);
			}
		} else {
			for (i = 0; i < CellsCount; i++) {
				theCells[i].style.backgroundColor = newColor;
			}
		}
	}

    return true;
}

function cellOver(theCell, newColor)
{
	if(!theCell.id)
		{
			arrCells=document.getElementsByTagName('td');
			for(i=0;i<document.getElementsByTagName('td').length;++i)
			{
				document.getElementsByTagName('td')[i].id='c_'+i;
			}
		}
	        
		window.setTimeout("document.getElementById('"+theCell.id+"').style.backgroundColor='#"+newColor+"'",10);
}
//-->
</script>

<table border="0" width="80%">
<tr onMouseover="tableOver(this, '00FF00');" onMouseOut="tableOver(this, '000000');">
	<td align="center" onMouseover="cellOver(this, 'C0C0C0');" onMouseout="cellOver(this, '00FF00');">bla</td>
	<td align="center" onMouseover="cellOver(this, 'C0C0C0');" onMouseout="cellOver(this, '00FF00');">blub</td>
</tr>
</table>
</body>
</html>

So siehts im Moment aus. Jeder der sich dadrau auch ne HTML macht wird merken. Highlight geht aber mit der Maus rausgehen? Da bleiben ja die Farben bei allen Zellen wo man war...

Ich versteh das nich mehr. Der soll nur ein Zeilenhighlight machen und ein helleres Zellenhighlight.
 
Ich bin auch doof:

Code: 
<body bgcolor="#000000" text="#FFFFFF">
<script type="text/javascript">
<!--

function rowOver(theRow, newColor) {

	var i = 0;

	if (!theRow.id) {
		for(i=0;i<document.getElementsByTagName('tr').length;++i) {
			aktRow = document.getElementsByTagName('tr')[i];
			if (aktRow.id == "") { aktRow.id='row_'+i; }
			
		}
	}

	document.getElementById(theRow.id).style.backgroundColor= '#'+newColor;
}

function rowOut(theRow, newColor) { document.getElementById(theRow.id).style.backgroundColor= '#'+newColor; }

function cellOver(theCell, newColor) {

	var i = 0;

	if (!theCell.id) {
		for(i=0;i<document.getElementsByTagName('td').length;++i) {
			aktCell = document.getElementsByTagName('td')[i];
			if (aktCell.id == "") { aktCell.id='cell_'+i; }
			
		}
	}

	document.getElementById(theCell.id).style.backgroundColor= '#'+newColor;
}

function cellOut(theCell) { document.getElementById(theCell.id).style.backgroundColor= ''; }
//-->
</script>

<table border="0" width="80%">
<tr onMouseover="rowOver(this, '00FF00');" onMouseOut="rowOut(this, '000000');">
	<td align="center" onMouseover="cellOver(this, '00FFFF');" onMouseOut="cellOut(this);">bla</td>
	<td align="center" onMouseover="cellOver(this, '00FFFF');" onMouseOut="cellOut(this);">blub</td>
</tr>
</table>
</body>
</html>

Geht doch! Einfach der Zelle (td) als Hintergrund "" geben dann muss die sich wieder an der Zeile (tr) halten und die Farbe einnehmen.
 
Wozu so viel Tipparbeit? Nimm einfach folgende automatisierende Funktion:
Code: 
function() {
	var tableElements = document.getElementsByTagName("table");
	for(var i=0; i<tableElements.length; i++) {
		var trElements = tableElements[i].getElementsByTagName("tr");
		for(var j=0; j<trElements.length; j++) {
			trElements[j].className += " mouseout";
			trElements[j].onmouseover = new Function("this.className = this.className.replace(/mouseout/, 'mouseover')");
			trElements[j].onmouseout = new Function("this.className = this.className.replace(/mouseover/, 'mouseout')");
			var tdElements = trElements[j].getElementsByTagName("td");
			for(var k=0; k<tdElements.length; k++) {
				tdElements[k].className += " mouseout";
				tdElements[k].onmouseover = new Function("this.className = this.className.replace(/mouseout/, 'mouseover')");
				tdElements[k].onmouseout = new Function("this.className = this.className.replace(/mouseover/, 'mouseout')");
			}
		}
	}
}
Und dazu noch folgenden Stylesheet:
Code: 
tr:hover,
tr.mouseover {
	background-color:	#fe0;
}
td:hover,
td.mouseover {
	background-color:	#f66;
}
Fertig.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück