Como posso destacar uma linha da tabela usando Prototype?
-
09-06-2019 - |
Pergunta
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.
Solução
<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>
Outras dicas
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'); }
}
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>
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>
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...});
});
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.