✔ horizontaler und vertikaler mouseover effekt für tabellenzeilen?

JamesT · 26. Oktober 2005

Hallo Leute,

ich habe jetzt schon einiges mit CSS probiert und bin zu keiner guten Lösung gekommen, in CSS geht irgendwie nur das horizontale mouseover, da es dann immer für die jeweile <tr> gilt. Sicher gibt es eine lösung in Javascript für diese Problem.

Also ich möchte folgendes, in einer Tabelle gibt es verschiedene Modelle und verschiedene Drucker. wenn ich mich auf einer Tabellenzelle befinde soll sich von dieser Tabellenzelle alle Zellen oberhalb und unterhalb sowie links und rechts davon einfärben.

Das heisst damit ich genau immer sehe zu welchem modell und welchem Drucker diese Eigenschafft gehört. Die Erklärung war sicher etwas konfus, daher anbei ein paar Screenshots.

Ich hoffe ihr habt eine Lösung für mich.

Falls es doch mit CSS möglich ist, könnt ihr diesen Beitrag auch gern in das Forum verschieben, aber ich denke nicht das dies mit CSS machbar ist, es war mir jedenfalls noch nicht möglich.

Danke im voraus für eure Hilfe.

Grüße
Jamest

Ich seh grad auf dem ersten Bild sind die Überschriften vertauscht. Die zweite Tabelle ist selbstverständlich das mouseover mit der ACHT und die dritte mit der NEUN.

vop · 26. Oktober 2005

JavaScript-Lösungsansatz

Wenn Du alle td-Elemente einer Spalte mit jeweils dem selben Namen versiehst, kannst diese bequem in einer Schleife mittels document.getElementsByName ansprechen

etwa so
<tr name="Zeile1" ><td name="Spalte1">Wert</td><td name="Spalte2">Wert2</td></tr>
<tr name="Zeile2" ><td name="Spalte1">Wert</td><td name="Spalte2">Wert2</td></tr>

Mit den Zeilen hast du es ja schon gelöst.

vop

JamesT · 26. Oktober 2005

Danke für diesen Lösungsansatz.

Da ich mich mit Javascript nicht wirklich auskenne, werd ich mir wohl am besten mal ein mouseover script mit hilfe von google suchen und das dann irgendwie umbauen. Oder hättest du dafür vielleicht auch einen Lösungsansatz ?

Kann ich vielleicht das als vorlage benutzen? @ vop

Code:

<html><head>
<title>JavaScript On Mouse Over Highlight Row Demo</title>
</head>
<body bgcolor="white" color="black">

<div style="border:1px solid maroon; padding: 15px;">This page is an example from the article <a href="http://devcorner.georgievi.net/articles/javascript/mouse-over-javascript/">Higlight Element On Mouse Over with JavaScript</a></div>
<p>The example demonstrates how to use JavaScript and DHTML to change the background color of a table row when the mouse moves over it.</p>

<p>Move the mouse over the table below to see how the row behind the cursor changes.</p>

<script language="JavaScript">
<!--
var cOver = '#EEB0B0';
var cOdd = '#EEEEEE';
var cEven = '#F3F3F3';
function hl(source,color){ source.style.backgroundColor=color }

//-->
</script>

<style>
tr.odd { background-color: #EEEEEE; }
tr.even { background-color: #F3F3F3; }
</style>

<table width="200" cellspacing="1" cellpadding="2" border="0" bgcolor="#FFFFFF">
	<tr class="odd" onMouseOver="hl(this,cOver);" onMouseOut="hl(this,cOdd);"><td>Item 1</td></tr>
	<tr class="even" onMouseOver="hl(this,cOver);" onMouseOut="hl(this,cEven);"><td>Item 2</td></tr>
	<tr class="odd" onMouseOver="hl(this,cOver);" onMouseOut="hl(this,cOdd);"><td>Item 3</td></tr>
	<tr class="even" onMouseOver="hl(this,cOver);" onMouseOut="hl(this,cEven);"><td>Item 4</td></tr>
	<tr class="odd" onMouseOver="hl(this,cOver);" onMouseOut="hl(this,cOdd);"><td>Item 5</td></tr>
	<tr class="even" onMouseOver="hl(this,cOver);" onMouseOut="hl(this,cEven);"><td>Item 6</td></tr>
</table>


</body></html>

Danke im voraus für deine Hilfe

Jamest

con-f-use · 26. Oktober 2005

Ansonsten: Ein ganz aehnliches Thema gab's vor kurzem schonmal - vielleicht findest du ja ueber die Forensuche etwas.

Tobias Menzel · 26. Oktober 2005

Hi,

mal ein Ansatz:

HTML:

<html>
<head>
<title>Zellen ...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
td {
	width:				30px;
	background-color:	#FFFFFF0;
	border:				1px solid;	
}
</style>
<script type="text/javascript">
function over(id) {
	//alert("over: " + id);
	var a = id.split("_");
	var dy = parseInt(a[0], 10);
	var dx = parseInt(a[1], 10);
	for (var y=0; y<5; y++) {
		for (var x=0; x<5; x++) {
			var obj = document.getElementById(y + "_" + x);
			if (x == dx || y == dy) {
				highlight(obj, "#FF0000");
			}
		}
	} 
}

function out(obj) {
	for (var y=0; y<5; y++) {
		for (var x=0; x<5; x++) {
			var obj = document.getElementById(y + "_" + x);
			highlight(obj, "#FFFFFF");
		}
	} 
}

function highlight(obj, col) {
	//alert(obj);
	obj.style.backgroundColor = col;
}
</script>
<body>
<table>
	<tr>
		<td id="0_0" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="0_1" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="0_2" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="0_3" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="0_4" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td>
	</tr>
	<tr>
		<td id="1_0" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="1_1" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="1_2" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="1_3" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="1_4" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td>
	</tr>
	<tr>
		<td id="2_0" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="2_1" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="2_2" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="2_3" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="2_4" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td>
	</tr>
	<tr>
		<td id="3_0" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="3_1" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="3_2" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="3_3" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="3_4" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td>
	</tr>
	<tr>
		<td id="4_0" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="4_1" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="4_2" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="4_3" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td><td id="4_4" onmouseover="over(this.id)" onmouseout="out(this.id)">&nbsp;</td>
	</tr>
</table>
</body>
</html>

Das geht aber sicher eleganter, z.B. durch eine automatische Zuweisung der Mausereignisse zu den td-s.

Gruß
.

JamesT · 26. Oktober 2005

Hey Datic,

vielen Dank für diese Lösung, habe das gerade ausprobiert und es funktioniert super.

Ich bastel das jetzt mal komplett in meine Tabelle, und dann mal schauen wie es ausschaut.

Vielen Dank schonmal.

Grüße

Jamest

JamesT · 26. Oktober 2005

Kannst du mir noch sagen welche Zeilen ich ändern muss wenn ich 70 Spalten und 100 Zeilen habe?

Danke und Gruß

Jamest

Tobias Menzel · 26. Oktober 2005

... ich habe Dir auf Deine PN geantwortet.

Gruß

P.S.: das nächstemal bitte nur im Forum, denn was herauskommst ist: 1. PN poppt beim Login auf, 2. man lässt sich nicht lumpen und antwortet, 3. Ein Blick in den Thread zeigt, dass die Frage dort auch gestellt wurde, 4. wenig Motivation, die Antwort nocheinmal im Forum zu posten und zu guter letzt: 5. Ungeduldige PNs wirken sich allgemein abschwächend auf die Motivation der "Antwortenden" aus - Du glaubst garnicht, wie viele ich davon pro Woche bekomme ...

Quaese · 26. Oktober 2005

Hi,

noch eine Möglichkeit, bei der du weder die Anzahl der Zeilen noch der Spalten kennen musst.
Ausserdem musst du der Tabelle nur eine ID geben und diese in das entsprechende Array
(arrTableIDs) eintragen.
Alles andere (mouseover-Funktion, mouseout-Funktion) wird durch die JavaScript-Funktion init
eingetragen, die im onload-Event aufgerufen wird.

Die Funktion markTable ist für das Markieren der gewünschten Zeile und Spalte verantwortlich.

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
  <!--
table td{ background: #fff;}
 //-->
</style>
<script type="text/javascript">
  <!--
/* In dieses Array die IDs der Tabellen eintragen, die mit dem Effekt ausgestattet sein sollen */
var arrTableIDs = new Array("t1", "t2");

/* Ausgangs- und Hoverfarben angeben */
var colStartFarbe = "#ffffff";  // Ausgangsfarbe der Zeilen und Spalten
var colHoverFarbe = "#D5E7FF";  // Farbe, in der die Zeile und Spalte gefärbt werden soll

/* ************************************************************** *
 * Funktion zum Markieren der Zeile und Spalte, die objTD enthält *
 * Parameter: objTD   - Objekt der auslösenden Zelle              *
 *            intOver - welcher Event wird gewünscht,             *
 *                      1 = mouseover                             *
 *                      0 = mouseout                              *
 * ************************************************************** */
function markTable(objTD, intOver){
  // Zeilen-Kollektion
  var objRows = objTD.parentNode.parentNode.rows;

/* Zeile und Spalte färben */
  // Ermittelte Zeile durchlaufen
  for(var i=0; i<objRows[objTD.rowNr].cells.length; i++){
    // Falls ein Hover-Effekt gewünscht ist
    if(intOver == 1)
      objRows[objTD.rowNr].cells[i].style.backgroundColor = colHoverFarbe;
    // Falls die Zellen wieder in den Ausgangszustand versetzt werden sollen
    else
      objRows[objTD.rowNr].cells[i].style.backgroundColor = colStartFarbe;
  }
  // Ermittelte Spalte durchlaufen
  for(var i=0; i<objRows.length; i++){
    // Falls ein Hover-Effekt gewünscht ist
    if(intOver == 1)
      objRows[i].cells[objTD.cellNr].style.backgroundColor = colHoverFarbe;
    // Falls die Zellen wieder in den Ausgangszustand versetzt werden sollen
    else
      objRows[i].cells[objTD.cellNr].style.backgroundColor = colStartFarbe;
  }
}

function init(){
  // Tabellen durchlaufen
  for(var intTab=0; intTab<arrTableIDs.length; intTab++){
    // Zeilen-Kollektion holen
    objRows = document.getElementById(arrTableIDs[intTab]).rows;
    // Alle Zeilen durchlaufen
    for(var i=0; i<objRows.length; i++){
      // Zellen der aktuellen Zeile durchlaufen
      for(var j=0; j<objRows[i].cells.length; j++){
        objRows[i].cells[j].rowNr  = i;  // Zellen-Objekt um Zeilenindex-Attribut erweitern
        objRows[i].cells[j].cellNr = j;  // Zellen-Objekt um Spaltenindex-Attribut erweitern
        objRows[i].cells[j].onmouseover = new Function("fx", "markTable(this, 1)");
        objRows[i].cells[j].onmouseout  = new Function("fx", "markTable(this, 0)");
      }
    }
  }
}

window.onload=init;
 //-->
</script>
</head>
<body>
<h2>Tabelle 1</h2>
<table id="t1"><!-- ID "t1" in Array (arrTableIDs) eintragen -->
  <tr>
    <td>(0,0)</td>
    <td onclick="alert(this.rowNr + ', ' +this.cellNr);">(0,1)</td>
    <td>(0,2)</td>
    <td>(0,3)</td>
  </tr>
  <tr>
    <td>(1,0)</td>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
  </tr>
  <tr>
    <td>(2,0)</td>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
  </tr>
  <tr>
    <td>(3,0)</td>
    <td>(3,1)</td>
    <td>(3,2)</td>
    <td>(3,3)</td>
  </tr>
</table>

<h2>Tabelle 2</h2><!-- ID "t2" in Array (arrTableIDs) eintragen -->
<table id="t2">
  <tr>
    <td>(0,0)</td>
    <td>(0,1)</td>
  </tr>
  <tr>
    <td>(1,0)</td>
    <td>(2,1)</td>
  </tr>
</table>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

JamesT · 27. Oktober 2005

Hallo zusammen,

vielen Dank @ quase für den Code.

Damit hab ich es nun realisiert, und das Ergebnis sieht so aus:

http://www.apex-design.de/test/druckertabelle.html

Jetzt hatte ich jedoch noch die Idee, das der Tabellenkopf immer oben bleiben sollte, und nicht wenn man etwas tiefer srollt nicht mehr zu sehen ist. Dafür habe ich nun einen iframe verwendet.

Jedoch geht damit das mouseover nichtmehr bis ganz nach oben obwohl die beiden tabellen die selbe id haben. Ich denke es geht nicht weil es nun 2 tabellen sind. Habe es auch mal versucht mit einem normalen Frameset zu realisieren, gleiches Ergebnis.

Hat jemand eine Idee, den Tabellenkopf auf andere weise oben stehen zulassen, aber
so das das Mouseover funktioniert wie bei dem ersten Ergebnis ganz oben?

Hier die Seite mit den iframes:

http://www.apex-design.de/test/tabelleiframe.html

Vielen Dank schonmal für die hervorragende Hilfe.

Grüße

Jamest

✔ horizontaler und vertikaler mouseover effekt für tabellenzeilen?

JamesT

Erfahrenes Mitglied

Anhänge

vop

Erfahrenes Mitglied

JamesT

Erfahrenes Mitglied

con-f-use

Erfahrenes Mitglied

Tobias Menzel

Erfahrenes Mitglied

JamesT

Erfahrenes Mitglied

JamesT

Erfahrenes Mitglied

Tobias Menzel

Erfahrenes Mitglied

Quaese

Moderator

JamesT

Erfahrenes Mitglied

Neue Beiträge