Sempre que posso, procuro melhorar alguns scripts (visualização, velocidade, integração…). Neste post, vou mostrar um pequeno script js para manipular dados de uma tabela. Coisa básica, o objetivo é clicar na letra e mostra na tabela apenas a linhas que comecem com ela (letra).

JAVASCRIPT

$(document).ready(function(){
 var enab = $(document.getElementById('todas')).addClass('enable');
 var tr = $('table tbody > tr');
 $('ul > li').bind('click',function(){
  if (enab) $(enab).removeClass();
  enab = $(this).addClass('enable');
  var text = $(this).text();
  if (text.match(/todas/i)){
   tr.show();
  } else {
   if ($.browser.msie) {
    tr.hide();
    $('.'+text).show()
   } else {
    tr.hide().filter('.'+text).show();
   }
  }
 });
});

CSS

ul li {
 display:inline;float:left;width:30px;text-align:center;list-style:none;
 background:#ccc;margin-left:2px;cursor:pointer;border:1px solid #ccc;
}
.enable {
 background:#028AC6;color:#fff;border:1px solid #555;
}
.disable {
 background:#ccc;color:#000;
}
table {
 background:#dadada;margin-top:10px;
}
thead tr {background:#ccc;}
thead th {width:100px;}
tbody tr {background:#fff;}

HTML
<ul>
<listyle="margin-left:0;">A</li>
<li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>
<li>H</li><li>I</li><li>J</li><li>L</li>
<li>M</li><li>N</li><li>O</li><li>P</li>
<li>Q</li><li>R</li><li>S</li><li>T</li>
<li>U</li><li>V</li><li>X</li><li>Z</li>
<listyle="width:80px"id="todas">TODAS</li>
<divstyle="clear:both"></div>
</ul>
<table>
<thead>
<tr>
<th>Coluna1</th>
<th>Coluna2</th>
</tr>
</thead>
<tbody>
<trclass="A"><td>Atestado</td><td>1</td></tr>
<trclass="A"><td>Almanaque</td><td>2</td></tr>
<trclass="A"><td>Almoxarifado</td><td>3</td></tr>
<trclass="B"><td>Balconista</td><td>1</td></tr>
<trclass="B"><td>Balão</td><td>2</td></tr>
<trclass="C"><td>Carro</td><td>3cef</td></tr>
<trclass="D"><td>Dedos</td><td>3sdf</td></tr>
<trclass="E"><td>Escola</td><td>3ssdfdf</td></tr>
<trclass="F"><td>Fórmula1</td><td>3s</td></tr>
<trclass="F"><td>Farsante</td><td>3s</td></tr>
<trclass="G"><td>Gases</td><td>3s</td></tr>
</tbody>
</table>

Testado no IE6, IE7 e FireFox.

Confira.

[s]

JunioR

Anúncios