✔ Onmouseover über mehrere Zeilen

Antispy · 28. Juli 2008

Hallo Zusammen,
ich bin gerade dabei eine Tabelle in Html übersichtlich zu gestalten.
Meine Tabelle sieht ähnlich wie folgendes Beispiel aus:

+-------------------------------+
| Daten 1 |
+--------+----------+---------+
| | | |
+--------+----------+---------+
| Daten 2 |
+--------+----------+---------+
| | | |
+--------+----------+---------+
(irgendwie funktionierte der hintere Trennstrich leider nicht

)

in den Kästchen unterhalb "Daten1" und unterhalb "Daten2" sind jeweils Informationen untergebracht.

Nun versuche ich hier einen Mouseover einzufügen, welcher bisher auch funktioniert. Leider funktioniert dieser aber immer nur über eine Zeile ( <tr onMouseOver=....)
Wie ist es mir möglich dieses Mouseover auch über den darunterliegenden <tr> mitzuziehen?
Ich habe über google ein paar Hinweise gefunden, dass man dieses über IDs machen könnte, leider war mir dieses etwas zu kompliziert.
Dieses habe ich hier in der Suche gefunden:
http://www.tutorials.de/forum/javas...ler-mouseover-effekt-fuer-tabellenzeilen.html

Wäre nett, wenn mir dieses jemand erläutern könnte!
Danke im Voraus,
Antispy

nox · 28. Juli 2008

Hy Antispy

habe dies so geregelt:

HTML:

<head>
<script language="JavaScript">
function over(elem){
	document.getElementById(elem).style.backgroundColor='#FF5555';
}
function out(elem){
	document.getElementById(elem).style.backgroundColor='#FFFFCC';
}
</script>
</head>

<body>
<table>
<tr id="1" onmouseover="over(1)" onmouseout="out(1)"><td>blaa</td><td>blaa</td><tr>
<tr id="2" onmouseover="over(2)" onmouseout="out(2)"><td>blaa2</td><td>blaa2</td><tr>

Greez NoX

Maik · 28. Juli 2008

Hi,

hier sind mehrere Tabellenzeilen und keine Spalten gefragt.

mfg Maik

nox · 29. Juli 2008

Hy

Probier es mal hiermit

HTML:

<script language="JavaScript">

function over(){
	for (var i = 0; i < over.arguments.length; i++){
		id = over.arguments[i];
		document.getElementById(id).style.backgroundColor = '#FF9900';
	}
}

function out(){
	for (var i = 0; i < out.arguments.length; i++){
		id = out.arguments[i];
		document.getElementById(id).style.backgroundColor = '#FFFFFF';
	}
}


</script>
</HEAD>


<body>
<table>
<tr><td id="1" onmouseover="over(1,3)" onmouseout="out(1,3)">blaa</td><td id="2" onmouseover="over(2,4)" onmouseout="out(2,4)">blaa</td><tr>
<tr><td id="3" onmouseover="over(1,3)" onmouseout="out(1,3)">blaa2</td><td id="4" onmouseover="over(2,4)" onmouseout="out(2,4)">blaa2</td><tr>

Greez Nox

spex · 29. Juli 2008

Warum mit JavaScript? Probiers hiermit.
Datei findest du auch nochmal im Anhang.
Hoffe es ist das was du dir vorgestellt hast.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample</title>

<style type="text/css">

	.container {
		border:1px solid #000;
		width:300px;
	}
	
	.container:hover {
		background:#CCFFFF;
	}

</style>

</head>

<body>

        <table width="300" class="container">
          <tr>
            <td colspan="5">DATEN 1</td>
          </tr>
          <tr>
            <td height="100">spalte1</td>
            <td>spalte2</td>
            <td>spalte3</td>
            <td>spalte4</td>
            <td>spalte5</td>
          </tr>
        </table>
    
    <br /><br />

        <table width="300" class="container">
          <tr>
            <td colspan="5">DATEN 2</td>
          </tr>
          <tr>
            <td height="100">spalte1</td>
            <td>spalte2</td>
            <td>spalte3</td>
            <td>spalte4</td>
            <td>spalte5</td>
          </tr>
        </table>

</body>
</html>

Antispy · 29. Juli 2008

Hallo Zusammen,
danke für eure schnellen Antworten!
Im Grunde genommen ist es schon das, wonach ich gesucht habe, leider jedoch kann ich es so nicht in meine Seite einbinden.

In der Antwort von sp3x ist die Antwort das, was ich benötige, leider jedoch möchte ich folgenden Aufbau der Seite vermeiden:

Code:

<table>
<table><tr><td></td><td></td></tr></table>
<table><tr><td></td><td></td></tr></table>
<table><tr><td></td><td></td></tr></table>
<table><tr><td></td><td></td></tr></table>
<table><tr><td></td><td></td></tr></table>
<table><tr><td></td><td></td></tr></table>
</table>

Ich hätte es lieber folgendermaßen:

Code:

<table>
<tr id="table_1"><td></td><td></td></tr>
<tr id="table_1"><td></td><td></td></tr>
<tr id="table_2"><td></td><td></td></tr>
<tr id="table_2"><td></td><td></td></tr>
<tr id="table_3"><td></td><td></td></tr>
<tr id="table_3"><td></td><td></td></tr>
</table>

Dieses ist nun nur eine Idee von mir. Es bekommen immer 2 Spalten hintereinander die gleiche id zugewiesen (z.B. table_2). Bei einem Mouseover werden auch nur diese beiden Zeilen mit einem Hintergrund versehen.Das Problem was sich hier allerdings aufbaut ist, dass 1. die ID immer weitergeführt werden muss (was mittels der beigefügten Programmiersprache kein Problem wäre) und 2. dass hierzu ein passender css-code bestehen muss, wo ich leider nicht weiß, wie ich diesen passend zu meinem Beispiel anfertige

Ich hoffe, dass ihr hier einen Rat wisst

Danke schonmal vielmals für Eure Antworten!!

Liebe Grüße,
Antispy

Quaese · 29. Juli 2008

Hi,

IDs dürfen in einem Dokument nur einmalig vergeben werden.

Es ist jedoch eine Lösung ohne IDs möglich. Übergeben wird einer Routine mit Hilfe der this-Referenz ein Zeiger auf das auslösende Element. Davon ausgehend wird zunächst das zugehörige Tabellenobjekt ermittelt. Über die rows-Kollektion wird dann der Index der auslösenden Zelle festgestellt. Damit können die auslösende und Folgezeile markiert bzw. demarkiert werden.

Code:

<html>
<head>
<title></title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#tableID{ background: #fff;}
.rowHighlight{ background: #ccc;}
 //-->
</style>
<script type="text/javascript">
  <!--
function highlightRow(objRow){
  // Tabellenobjekt ermitteln
  var objTable = objRow.parentNode.parentNode;

  // Auslösende Zeile ermitteln
  for(var i=0; i<objTable.rows.length; i++){
    if(objTable.rows[i] == objRow)
      break;
  }

  // Über den Zeilenindex die auslösende und folgende Zeile markieren/demarkieren
  objTable.rows[i].className = (objTable.rows[i].className == "rowHighlight")? "" : "rowHighlight";
  if(i < objTable.rows.length-1)
    objTable.rows[i+1].className = (objTable.rows[i+1].className == "rowHighlight")? "" : "rowHighlight";
}
 //-->
</script>
</head>
<body>
<table id="tableID">
  <tr onmouseover="highlightRow(this);" onmouseout="highlightRow(this);">
    <td>0.0</td>
    <td>0.1</td>
    <td>0.2</td>
  </tr>
  <tr onmouseover="highlightRow(this);" onmouseout="highlightRow(this);">
    <td>1.0</td>
    <td>1.1</td>
    <td>1.2</td>
  </tr>
  <tr onmouseover="highlightRow(this);" onmouseout="highlightRow(this);">
    <td>2.0</td>
    <td>2.1</td>
    <td>2.2</td>
  </tr>
</table>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

Sven Mintel · 29. Juli 2008

Moin,

das Problem bei sp3x' Lösung ist, dass der IE :hover nur bei Links unterstützt.
Falls dir das egal ist, wäre dies evtl. eine Lösung, die dir zusagt:

Code:

<style type="text/css">
<!--
tbody.set:hover{background:red;}
-->
</style>

<table>
  <tbody class="set">
    <tr><td>daten1</td></tr>
  </tbody>
  <tbody class="set">
    <tr><td>daten2</td></tr>
    <tr><td>daten2</td></tr>
  </tbody>
  <tbody class="set">
    <tr><td>daten3</td></tr>
    <tr><td>daten3</td></tr>
    <tr><td>daten3</td></tr>
  </tbody>
</table>

spex · 29. Juli 2008

Sven Mintel hat gesagt.:
Moin,
das Problem bei sp3x' Lösung ist, dass der IE :hover nur bei Links unterstützt.

Naja nicht ganz, der IE 7 und IE8Beta, unterstützen das.
IE6 und abwärts leider nicht.

Ich mach es immer so weil ich JavaScript wirklich nur einsetzen will wenn es nicht anders möglich ist, viele haben es einfach deaktiviert und dann gibts nur Probleme.

Antispy · 30. Juli 2008

Hallo Zusammen!
Mit den vorgegeben Lösungsvorschlägen konnte ich mein Problem super beseitigen

Ich habe mich schließlich für die Hilfe von Quaese entschieden und meinen Code etwas angepasst

Bei ihm war es bisher so ausgerichtet, dass IMMER die darunterliegende Zeile (falls diese existiert) mit markiert wird.
Ich habe nun 2 Funktionen geschrieben. Einmal eine, womit ich die untere Zeile Abfrage und einmal womit ich die obere Zeile abfrage. Je nachdem welche Zeile mit der Maus berührt wird, wird die darüber oder darunterliegende Zeile mitmarkiert

Ich bedanke mich herzlich für alle Lösungstipps

DANKE!!

Liebe Grüße,
Antispy

✔ Onmouseover über mehrere Zeilen

Antispy

Mitglied

nox

Erfahrenes Mitglied

Maik

nox

Erfahrenes Mitglied

spex

Anhänge

Antispy

Mitglied

Quaese

Moderator

Sven Mintel

Mitglied

spex

Antispy

Mitglied

Neue Beiträge