Linhas alternadas [Javascript]

Linhas alternadas

Publicado por Filype Pereira 30/12/2005

[ Hits: 10.463 ]

Download js.html

0 0

Denuncie Favoritos Indicar

Simple script em JavaScript que exibe uma tabela com dados e as cores da tabela alternadas entre #FFFFFF e #F5F5F5

Esconder código-fonte

<html>
   <head>
      <title>Tabela com cores alternadas</title>
      <style type="text/css">
      td.cabcima { background: ButtonFace; border: outset 1px ButtonFace; text-align: center; }
      .bg-FFFFFF { background: #ffffff;}
      .bg-F5F5F5 { background: #f5f5f5;}
      td { font-family: helvatica, verdana, arial, sans-serif; font-size: 12px; }
   table { overflow: scroll }
      </style>
   </head>
<body>
<script language="JavaScript" type="text/javascript">

      var paises = new Array("Brasil", "Argentina", "Colombia", "EUA", "México", "Holanda", "Alemanha", "França", "Espanha", "Chile", "Japão");
      var css;
      document.write('<table border="0" cellspacing="0" width="449" align="center">');
         document.write('<tr >');
         document.write('<td class="cabcima"> <\/td>');
         document.write('<td class="cabcima">Nome do pais<\/td>');
         document.write('<td class="cabcima">Quantidade de caracteres<\/td>');
         document.write('<\/tr>');

      for (i in paises)
      {
         (i%2) ? css = "bg-FFFFFF" : css = "bg-F5F5F5";

         document.write('<tr class='+css+'>');
         document.write('<td class="cabcima">'+i+'<\/td>');
         document.write('<td> '+paises[i]+'<\/td>');
         document.write('<td>'+paises[i].length+'<\/td>');
         document.write('<\/tr>');
      }
      document.write('<\/table>');

   
</script>
</body>
</html>

Scripts recomendados

Motor de busca para o Viva o Linux no Firefox

Descubra que dia da semana você nasceu!

Master Data , Detalhada !!!

Sistema de Login

Tabela paginada e com diferenciação de cor nas linhas

Comentários

[1] Comentário enviado por everton3x em 31/12/2008 - 19:52h

Útil este script, porém tem um mais completo em http://www.vivaolinux.com.br/script/tableConstructor

0 0