Tabellenzeilen bei onmouseover highlighten

Zergling-new · 06.03.2007, 13:25

Hallo,
habe gerade den Effekt benötigt, dass beim Überfahren einer Tabellenzeile diese Zeile eingefärbt wird. Beim Verlassen der Zeile mit der Maus, soll die Aktion wieder rückgängig gemacht werden.
Der Effekt wurde nachträglich gewünscht, um mir die Arbeit zu ersparen, jedem <tr> dann nachträglich ein onmouseover/onmouseout zuzuweisen, habe ich mir folgendes Skript gebaut, dass ihr vielleicht auch einmal gebrauchen könntet.

Einfach die beiden CSS-Klassen "tre-hover" (tre = table row effect) und "tre-select" selbst gestalten und die JavaScript-Datei "table-row-effect.js" einbinden.

Die Funktion wendet den Effekt dann auf alle Tabellen an, deren CSS-Klasse "tre-table" ist. Ich benutze Tabellen nicht mehr zwecks Layout, sondern nurnoch für tabellarische Darstellung. Deshalb brauche ich die Bedingung innerhalb der Schleifen nicht und habe sie bei mir entfernt.

table-row-effect.js

Code:

function tableRowEffectHover()
{
    // is the element already selected?
    if (this.className.indexOf("tre-click") == -1) {
        // no? then show the hover effect
        this.className += " tre-hover";
    }
}

function tableRowEffectUnhover()
{
    // remove the hover effect
    this.className = this.className.replace(/\b(tre-hover)\b/, "");
}

function tableRowEffectSelect()
{
    // is the element already selected?
    if (this.className.indexOf("tre-select") != -1) {
        // then remove the selection (toggle click)
        this.className = this.className.replace(/\b(tre-select)\b/, "");
    } else {
        // othervise show the selection effect
        this.className += " tre-select";
    }
}

initTableRowEffect = function()
{
    var tableObjects = document.getElementsByTagName('TABLE');
    for (var t = 0; t < tableObjects.length; t++) {
        // remove the following javascript line to force this effect to all tables
        if (tableObjects[t].className.indexOf("tre-table") != -1) {
            var tableRowObjects = tableObjects[t].getElementsByTagName('TR');
            for (var tr = 0; tr < tableRowObjects.length; tr++) {
                tableRowObjects[tr].onmouseover = tableRowEffectHover;
                tableRowObjects[tr].onmouseout  = tableRowEffectUnhover;
                tableRowObjects[tr].onclick     = tableRowEffectSelect; 
            }
        // remove the following javascript line to force this effect to all tables
        }
    }
}

window.onload = initTableRowEffect;

table-row-effect.css

Code:

html body table tr.tre-hover {
    background : silver;
}

html body table tr.tre-select {
    background : red;
}

table-row-effect.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    
    <script type="text/javascript" src="table-row-effect.js"></script>
    
    <link href="table-row-effect.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    
    <table border="1">
        <tr>
            <td>eins</td>
            <td>zwei</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
    
    <table border="1" class="tre-table">
        <tr>
            <td>eins</td>
            <td>zwei</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
    
</body>
</html>

Getestet Mozilla Firefox 2 und MSIE 6.

phpdummi · 06.03.2007, 13:31

tolle sache, wärs auch ok wenn ich das gleiche "tutorial" mal mit einem JS-Framework bsp. jQuery schreibe? dann hat man mal einen direkten vergleich und kann sich entscheiden was einem zusagt.

Kein Genie · 17.03.2007, 07:38

Sehr cool.
Danke

Zergling-new · 17.03.2007, 10:20

@phpdummi
Habe dein Posting jetzt erst gelesen: Ja klar - sowas ist immer willkommen!
Du oder ihr könnt auch gerne unaufgefordert Tutorials schreiben und mir schicken.

agrajag · 17.03.2007, 12:54

Zitat:

Zitat von phpdummi

tolle sache, wärs auch ok wenn ich das gleiche "tutorial" mal mit einem JS-Framework bsp. jQuery schreibe?

Das geniale an jQuery ist ja, dass man dafür kaum ein Tutorial braucht weil es wirklich leicht und intuitiv geht. Und auf 1000 verschiedene Wege.

Beispiel:

Code:

$(document).ready(function(){
 
	$(".tre-table tr").not(".tre-hover").mouseover(function(){
		$(this).addClass("tre-hover");
	});
	
	$(".tre-table tr").not(".tre-select").mouseout(function(){
		$(this).removeClass("tre-hover");
	});

	$(".tre-table tr").click(function(){
			$(this).not($(this).filter(".tre-select").removeClass("tre-select")).addClass("tre-select");
	});
	
});

Der Nachteil ist, dass man sich eine 19kb große Datei ans Bein bindet und anfängt rumzubasteln weil alles so einfach ist ...und dann findet man "interface for jquery" und probiert noch mehr run und verliert sich in Spielereien. (Die aber echt geil aussehen

)

Zergling-new · 12.01.2008, 18:47

Kleine technische Korrektur des Skriptes:

Code:

function tableRowEffectHover()
{
    // is the element already selected?
    if (this.className.indexOf("tre-select") == -1) {
        // no? then show the hover effect
        this.className += " tre-hover";
    }
}

function tableRowEffectUnhover()
{
    // remove the hover effect
    this.className = this.className.replace(/\b(tre-hover)\b/, "");
}

function tableRowEffectSelect()
{
    // is the element already selected?
    if (this.className.indexOf("tre-select") != -1) {
        // then remove the selection (toggle click)
        this.className = this.className.replace(/\b(tre-select)\b/, "");
    } else {
        // othervise show the selection effect
        // remove the hover effect
        this.className = this.className.replace(/\b(tre-hover)\b/, "");
        this.className += " tre-select";
    }
}

initTableRowEffect = function()
{
    var tableObjects = document.getElementsByTagName('TABLE');
    for (var t = 0; t < tableObjects.length; t++) {
        // remove the following javascript line to force this effect to all tables
        if (tableObjects[t].className.indexOf("tre-table") != -1) {
            var tableRowObjects = tableObjects[t].getElementsByTagName('TR');
            for (var tr = 0; tr < tableRowObjects.length; tr++) {
                tableRowObjects[tr].onmouseover = tableRowEffectHover;
                tableRowObjects[tr].onmouseout  = tableRowEffectUnhover;
                tableRowObjects[tr].onclick     = tableRowEffectSelect;
            }
        // remove the following javascript line to force this effect to all tables
        }
    }
}

window.onload = initTableRowEffect;

Kein Genie · 22.04.2008, 07:03

Eine Frage, jetzt ist es so, das du eins anklicken kannst, dann färbt es sich ein.
Beim nächsten anklicken das auch.
Aber wie muss ich das Script erweitern, dass immer nur das eingefärbt ist, wo ich gerade drauf geklickt habe?

Danke

brian johnson · 22.04.2008, 12:55

und wenn man auf den IE6 pfeift:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>NICHT OHNE TITEL, MENSCH!</title> 
    
    <style type="text/css">
		.tre-table tr:hover, .tre-table tr:focus
		{
			background-color:red;
		}

		.tre-table tr:active
		{
			background-color:blue;
		}
	</style>
</head> 
<body> 
    
    <table border="1"> 
        <tr> 
            <td>eins</td> 
            <td>zwei</td> 
        </tr> 
        <tr> 
            <td>one</td> 
            <td>two</td> 
        </tr> 
    </table> 
    
    <table border="1" class="tre-table"> 
        <tr> 
            <td>eins</td> 
            <td>zwei</td> 
        </tr> 
        <tr> 
            <td>one</td> 
            <td>two</td> 
        </tr> 
    </table> 
    
</body> 
</html>

Kein Genie · 22.04.2008, 14:08

aj soll aber bei beiden gehen

Manko10 · 22.04.2008, 14:08

Und wenn man es so machen will, dass alle Browser (bis eben auf den IE 6) den obigen Code verstehen:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>NICHT OHNE TITEL, MENSCH!</title>
   
    <style type="text/css">
      .tre-table tr:hover td, .tre-table tr:focus td
      {
         background-color:red;
      }

      .tre-table tr:active td
      {
         background-color:blue;
      }
   </style>
</head>
<body>
   
    <table border="1">
        <tr>
            <td>eins</td>
            <td>zwei</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
   
    <table border="1" class="tre-table">
        <tr>
            <td>eins</td>
            <td>zwei</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
   
</body>
</html>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

LinkBacks (?) LinkBack to this Thread: http://www.php.de/tutorials/43609-tabellenzeilen-bei-onmouseover-highlighten.html
Erstellt von	For	Type	Datum
Jquery Table	This thread	Refback	08.02.2012 23:05
Tabelle mit Hover	This thread	Refback	02.01.2011 21:33
Tabelle mit Hover	This thread	Refback	11.06.2010 19:30
Tabelle mit Hover - Offizielle deutschsprachige TYPOlight-Community	This thread	Refback	22.07.2009 11:43
Tabelle mit Hover - Offizielle deutschsprachige TYPOlight-Community	This thread	Refback	22.07.2009 11:22
Tabelle mit Hover - Offizielle deutschsprachige TYPOlight-Community	This thread	Refback	22.07.2009 11:20

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Textarea bei onmouseover vergrößern - IE Problem	R4v3r	HTML, Usability und Barrierefreiheit	3	07.05.2008 17:02
onmouseover - Problem	FrozenFox	HTML, Usability und Barrierefreiheit	2	15.11.2006 11:12
Layer onMouseOver	Quagga	HTML, Usability und Barrierefreiheit	2	09.07.2006 09:23
bei onmouseover sanft auf 100 pixel vergrößern	php_frage	HTML, Usability und Barrierefreiheit	5	29.04.2006 00:43
htmlcode highlighten	N!cKY	PHP-Fortgeschrittene	16	25.09.2005 11:57
PHP Menü onMouseOver !!!		PHP Tipps 2005-2	6	23.08.2005 00:56
Wörter highlighten, wenn man sie aus der Datenbank ausliest	Jojo1	PHP Tipps 2005	5	04.04.2005 20:15
Wörter in Wörter nicht highlighten		PHP Tipps 2005	4	29.03.2005 13:59
highlighten im [code][/code] bereich		PHP Tipps 2005	5	09.02.2005 17:59
Tabellenzeilen in unterschiedlichen Farben		PHP Tipps 2004	7	08.11.2004 14:18
[Erledigt] Code highlighten		PHP Tipps 2004	5	29.09.2004 14:40
[Erledigt] onmouseover		HTML, Usability und Barrierefreiheit	3	27.08.2004 00:24
OnMouseOver mit wanderndem <div>-Tag	Sirke	HTML, Usability und Barrierefreiheit	4	20.08.2004 21:04
tabelle mit onmouseover einblenden lassen		HTML, Usability und Barrierefreiheit	9	30.06.2004 13:08
Button OnMouseOver --> Nachricht in Textfeld anzeigen las		HTML, Usability und Barrierefreiheit	7	16.06.2004 17:49


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.03.2007, 13:31
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	tolle sache, wärs auch ok wenn ich das gleiche "tutorial" mal mit einem JS-Framework bsp. jQuery schreibe? dann hat man mal einen direkten vergleich und kann sich entscheiden was einem zusagt. __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

17.03.2007, 07:38
Kein Genie Erfahrener Benutzer Registriert seit: 19.03.2006 Beiträge: 413	Sehr cool. Danke

17.03.2007, 10:20
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	@phpdummi Habe dein Posting jetzt erst gelesen: Ja klar - sowas ist immer willkommen! Du oder ihr könnt auch gerne unaufgefordert Tutorials schreiben und mir schicken.

22.04.2008, 07:03
Kein Genie Erfahrener Benutzer Registriert seit: 19.03.2006 Beiträge: 413	Eine Frage, jetzt ist es so, das du eins anklicken kannst, dann färbt es sich ein. Beim nächsten anklicken das auch. Aber wie muss ich das Script erweitern, dass immer nur das eingefärbt ist, wo ich gerade drauf geklickt habe? Danke

22.04.2008, 14:08
Kein Genie Erfahrener Benutzer Registriert seit: 19.03.2006 Beiträge: 413	aj soll aber bei beiden gehen