Como posso destacar uma linha da tabela usando Prototype?

Question

Como posso usar a biblioteca Prototype e criar javascript discreto para injetar os eventos onmouseover e onmouseout em cada linha, em vez de colocar o javascript em cada tag de linha da tabela?

Uma resposta utilizando a biblioteca Prototype (em vez de mootools, jQuery, etc.) seria muito útil.

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

Você pode usar o protótipo addClassName e removeClassName métodos.

Crie uma classe CSS "hilight" que você aplicará ao hilighted <tr>'s.Em seguida, execute este código no carregamento da página:

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

Uma solução um pouco genérica:

Digamos que eu queira uma maneira simples de criar tabelas com linhas que serão destacadas quando eu colocar o ponteiro do mouse sobre elas.No mundo ideal isso seria muito fácil, com apenas uma regra CSS simples:

tr:hover { background: red; }

Infelizmente, versões mais antigas do IE não suportam o seletor :hover em elementos diferentes de A.Portanto, temos que usar JavaScript.

Nesse caso, definirei uma classe de tabela "destacável" para marcar tabelas que devem ter linhas flutuantes.Farei a troca de background adicionando e removendo a classe "destaque" na linha da tabela.

CSS

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

JavaScript (usando protótipo)

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

Tudo o que você precisa fazer agora é adicionar a classe "destacável" a qualquer tabela que desejar:

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

Answer 4

Fiz uma pequena alteração @swilliams código.

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

Isso me permite ter uma tabela com uma linha de cabeçalho que não obter destaque.

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

Answer 5

Você pode fazer algo em cada linha, assim:

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

Assim, no corpo dessa função, você tem acesso a cada linha, uma de cada vez, na variável ‘row’.Você pode então chamar Event.observe(row, ...)

Então, algo assim pode funcionar:

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

Answer 6

Encontrei uma solução interessante para o fundo das linhas, as linhas destacadas ao passar o mouse, sem JS.Aqui está link

Funciona em todos os navegadores.Para IE6/7/8...

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

E para Safari eu uso posição de fundo negativa para cada TD.