Wie kann ich mit Prototype eine Tabellenzeile hervorheben?

Question

Wie kann ich die Prototype-Bibliothek verwenden und unauffälliges Javascript erstellen, um die Ereignisse onmouseover und onmouseout in jede Zeile einzufügen, anstatt das Javascript in jedes Tabellenzeilen-Tag einzufügen?

Eine Antwort unter Verwendung der Prototype-Bibliothek (anstelle von Mootools, jQuery usw.) wäre am hilfreichsten.

Answer 1

<table id="mytable">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Bork</td><td>Bork</td></tr>

    </tbody>
</table>

<script type="text/javascript">

$$('#mytable tr').each(function(item) {
    item.observe('mouseover', function() {
        item.setStyle({ backgroundColor: '#ddd' });
    });
    item.observe('mouseout', function() {
        item.setStyle({backgroundColor: '#fff' });
    });
});
</script>

Answer 2

Sie können Prototypen verwenden addClassName Und removeClassName Methoden.

Erstellen Sie eine CSS-Klasse „hilight“, die Sie auf die hervorgehobenen Elemente anwenden <tr>'S.Führen Sie dann beim Laden der Seite diesen Code aus:

var rows = $$('tbody tr');  
for (var i = 0; i < rows.length; i++) {  
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); }  
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); }  
}

Answer 3

Eine etwas allgemeine Lösung:

Nehmen wir an, ich möchte eine einfache Möglichkeit haben, Tabellen mit Zeilen zu erstellen, die hervorgehoben werden, wenn ich den Mauszeiger darüber halte.Im Idealfall wäre dies mit nur einer einfachen CSS-Regel sehr einfach:

tr:hover { background: red; }

Leider unterstützen ältere IE-Versionen den :hover-Selektor für andere Elemente als A nicht.Wir müssen also JavaScript verwenden.

In diesem Fall definiere ich eine Tabellenklasse „highlightable“, um Tabellen zu markieren, die schwebende Zeilen haben sollten.Ich werde die Hintergrundumschaltung vornehmen, indem ich die Klasse „Hervorhebung“ in der Tabellenzeile hinzufüge und entferne.

CSS

table.highlightable tr.highlight { background: red; }

JavaScript (mit Prototyp)

// when document loads
document.observe( 'dom:loaded', function() {
    // find all rows in highlightable table
    $$( 'table.highlightable tr' ).each( function( row ) {
        // add/remove class "highlight" when mouse enters/leaves
        row.observe( 'mouseover', function( evt ) { evt.element().addClassName( 'highlight' ) } );
        row.observe( 'mouseout', function( evt ) { evt.element().removeClassName( 'highlight' ) } );
    } );
} )

HTML

Jetzt müssen Sie nur noch die Klasse „highlightable“ zu einer beliebigen Tabelle hinzufügen:

<table class="highlightable">
    ...
</table>

Answer 4

Ich habe eine kleine Änderung vorgenommen @swilliams Code.

$$('#thetable tr:not(#headRow)').each(

Dadurch kann ich eine Tabelle mit einer Kopfzeile erstellen nicht hervorgehoben werden.

<tr id="headRow">
    <th>Header 1</th>
</tr>

Answer 5

Sie können mit jeder Zeile etwas machen, etwa so:

$('tableId').getElementsBySelector('tr').each(function (row) {
  ...
});

Im Hauptteil dieser Funktion haben Sie also nacheinander Zugriff auf jede Zeile in der Variablen „row“.Anschließend können Sie Event.observe(row, ...) aufrufen.

So etwas könnte also funktionieren:

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});

Answer 6

Ich habe eine interessante Lösung für den Zeilenhintergrund gefunden, bei der die Zeilen beim Überfahren mit der Maus hervorgehoben werden, ohne JS.Hier ist Verknüpfung

Funktioniert in allen Browsern.Für IE6/7/8 ...

tr{ position: relative; }
td{ background-image: none } 

Und für Safari verwende ich für jedes TD eine negative Hintergrundposition.