Comment puis-je mettre en évidence une ligne de tableau à l’aide de Prototype ?

Question

Comment puis-je utiliser la bibliothèque Prototype et créer du javascript discret pour injecter les événements onmouseover et onmouseout dans chaque ligne, plutôt que de mettre le javascript dans chaque balise de ligne du tableau ?

Une réponse utilisant la bibliothèque Prototype (au lieu de mootools, jQuery, etc.) serait très utile.

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

Vous pouvez utiliser les prototypes addClassName et removeClassName méthodes.

Créez une classe CSS "hilight" que vous appliquerez au surligné <tr>'s.Exécutez ensuite ce code au chargement de la page :

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

Solution un peu générique :

Disons que je souhaite disposer d'un moyen simple de créer des tableaux avec des lignes qui seront mises en surbrillance lorsque je placerai le pointeur de la souris dessus.Dans un monde idéal, cela serait très simple, avec une seule règle CSS simple :

tr:hover { background: red; }

Malheureusement, les anciennes versions d'IE ne prennent pas en charge le sélecteur :hover sur des éléments autres que A.Nous devons donc utiliser JavaScript.

Dans ce cas, je définirai une classe de table « surlignante » pour marquer les tables qui doivent avoir des lignes planables.Je vais effectuer le changement d'arrière-plan en ajoutant et en supprimant la classe "highlight" sur la ligne du tableau.

CSS

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

JavaScript (en utilisant Prototype)

// 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

Tout ce que vous avez à faire maintenant est d'ajouter la classe "highlightable" au tableau de votre choix :

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

Answer 4

J'ai apporté une légère modification à @swilliams code.

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

Cela me permet d'avoir un tableau avec une ligne d'en-tête qui n'a pas être mis en valeur.

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

Answer 5

Vous pouvez faire quelque chose sur chaque ligne, comme ceci :

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

Ainsi, dans le corps de cette fonction, vous avez accès à chaque ligne, une à la fois, dans la variable 'row'.Vous pouvez ensuite appeler Event.observe(row, ...)

Donc, quelque chose comme ceci pourrait fonctionner :

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

Answer 6

J'ai trouvé une solution intéressante pour l'arrière-plan des lignes, les lignes étant mises en surbrillance au survol de la souris, sans JS.Voici lien

Fonctionne dans tous les navigateurs.Pour IE6/7/8...

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

Et pour Safari, j'utilise une position d'arrière-plan négative pour chaque TD.