JavaScript

Listar tabelas

Publicado por antlou em 04/06/2018

Este útil e pequeno script client-side listas intercaladamente os resultados de uma tabela.

Resultado:

ID	Nome	Apelido	Função
1	Filipe	Gomes	Web Designer
2	António	Tavares	Ceo
3	João	Morais	Programador
4	José	Távora	Tecnico de redes

Vou abaixo colocar o codigo, utilizando a linguagem JAVASCRIPT e HTML.

Todo o código poderá ser colocado num único ficheiro do tipo .html

listar_tabelas.js



<html>
<head>
    
<script>
    function id( el ){
        return document.getElementById( el );
    }
    var cor_antiga;
        window.onload = function()
    {
    var trs = id('zebra').getElementsByTagName('tr');
        for( var i=0; i<trs.length; i++ )
        {
            trs[i].onmouseover = function()
            {
            cor_antiga = this.style.backgroundColor;
            this.style.backgroundColor = '#8faadc';
            }
            trs[i].onmouseout = function()
            {
            this.style.backgroundColor = cor_antiga;
            }
        }
    }
</script>

    <style type="text/css">    .dif {background: #ccc;}</style>
    
</head>
<body>
        
<table id="zebra">
    <thead>
    <tr>
        <th>ID</th><th>Nome</th><th>Apelido</th><th>Função</th></tr>
    </thead>
    <tbody>
    <tr class="dif">
        <td>1</td><td>Filipe</td><td>Gomes</td><td>Web Designer</td>
    </tr>
    <tr>
        <td>2</td><td>António</td><td>Tavares</td><td>Ceo</td>
    </tr>
    <tr class="dif">
        <td>3</td><td>João</td><td>Morais</td><td>Programador</td>
    </tr>
    <tr>
        <td>4</td><td>José</td><td>Távora</td><td>Tecnico de redes</td>
    </tr>
    </tbody>
</table>

</body>
</html>

voltar ao topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 14 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.