Neste tutorial vamos aprender como colorir algumas linhas, específicos, de uma tabela após ela já estar toda carregada na página HTML.
Para isso, vamos usar o framework jquery.
O primeiro passo é construir a tabela:
<table id="tb1" border="1">
<tbody><tr>
<th>Codigo</th>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>01</td>
<td>Sérgio Santos</td>
<td>30</td>
</tr>
<tr>
<td>02</td>
<td>José Carlos Messias</td>
<td>38</td>
</tr>
<tr>
<td>03</td>
<td>Gian Carlos Mendonça</td>
<td>28</td>
</tr>
<tr>
<td>04</td>
<td>Maria Claudia</td>
<td>22</td>
</tr>
</tbody>
</table>O segundo passo e escreve o código CSS que vai colorir a linha a tabela:
<style type="text/css">
.fundoIdade{
background-color:#758CCA;
}
</style>No final da página html vamos inserir um código javascript:
<script type="text/javascript">
function ColoriIdades(idade){
$('#tb1 tbody tr').each(function(i){
tr=$(this);
tr.children('td').removeClass('fundoIdade');
valor=tr.children('td:eq(2)').html();
if(valor==idade){
tr.children('td').addClass('fundoIdade');
}
})
}
</script>Entendendo o código javascript:
na primeira linha $('#tb1 tbody tr').each(function(i) vamos percorrer todas as tr da tabela.na segunda linha tr=$(this); colocamos na variável tr o valor do objeto de cada trna terceira linha tr.children('td').removeClass('fundoGrupo') removeos a classe para quando for chamda novamente não sobreponha.na quarta linha valor=tr.children('td:eq(2)').html() colocamos na variável valor, o valor html de cada linha que está na coluna 2, contamos a partir de zero.na quinta linha fazemos uma checagem if(valor==idade) ou seja, se for a idade que estou querendo, então colore a linhae por fim na sexta linah tr.children('td').addClass('fundoGrupo') a linha da tabela é colorida.CHAME A FUNÇÃO da seguinte forma;
<a href="javascript:void(0)" onClick="ColoriIdades(30)">colorir linha com idade 30 anos</a>Lembrando que para o tutorial funcionar devemos estar usando a biblioteca jquery.
OBS: para baixar a biblioteca jquery entrar neste link: CLIQUE AQUI
De 0 a 10, o quanto você recomendaria este artigo para um amigo?