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

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

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

source d'informationauteur Jason Navarrete

  1. 9
    <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>
  2. 7

    Vous pouvez utiliser du Prototype addClassName et removeClassName méthodes.

    Créer une classe CSS "hilight" que vous pourrez appliquer à la hilighted <tr>'. Puis exécutez 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'); }  
}
  3. 3

    Un peu de solution générique:

    Disons que je veux avoir un moyen simple de faire des tables avec des lignes qui mettra en évidence quand je mets le pointeur de la souris au-dessus d'eux. Dans un monde idéal, ce serait très facile, avec seulement une simple règle CSS:

    tr:hover { background: red; }

    Malheureusement, les anciennes versions d'IE ne prennent pas en charge :placez le sélecteur sur des éléments autres que A. Donc, il faut utiliser du JavaScript.

    Dans ce cas, je vais définir un tableau de classe "highlightable" pour marquer les tables qui devrait avoir hoverable lignes. Je vais faire le fond de commutation par l'ajout et la suppression de la classe "highlight" sur la ligne de la table.

    CSS

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

    JavaScript (à l'aide de 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" à n'importe quelle table vous souhaitez:

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

    J'ai fait 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'est pas obtenir en surbrillance.

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

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

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

    Donc, dans le corps de cette fonction, vous avez accès à chaque ligne, un à un, dans la 'ligne' de la variable. Vous pouvez ensuite appeler l'Événement.observer(ligne, ...)

    Donc, quelque chose comme ça pourrait fonctionner:

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

    J'ai trouvé ab solution intéressante pour les Lignes d'arrière-plan, les lignes mettant en évidence sur le dessus 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-je utiliser négatif de fond pour chaque TD.