O problema é o seguinte:
Temos uma tabela com dados de pedidos, preenchida dinamicamente com AJAX/PHP/MySQL.
Até aí ok, porém, para facilitar a visualização, pretendemos colorir a linha (cada linha representa um pedido) conforme o valor da célula que contém a informação de estatus do pedido.
Antes da função jQuery, temos:

function colore_tabela()
{
/*
* TEMOS 8 Status possíveis, com sua cores respectivas:
* 1-salva; branca
* 2-aguardando validação; azul
* 3-não validada; amarelo
* 4-aguardando aprovação; azul
* 5-aprovada; verde
* 6-não aprovada; amarelo
* 7-cancelada; vermelho
* 8-concluida; verde
*/
$('#t_dados').find('tr').each(function(indice){
switch($(this).children().eq(0).text())
{
case 'aguardando validação':
case 'aguardando aprovação':
$(this).prop('class','info');
break;
case 'não validada':
case 'não aprovada':
$(this).prop('class','warning');
break;
case 'aprovada':
case 'concluida':
$(this).prop('class','success');
break;
case 'cancelada':
$(this).prop('class','danger');
break;
};
});
} |
function colore_tabela()
{
/*
* TEMOS 8 Status possíveis, com sua cores respectivas:
* 1-salva; branca
* 2-aguardando validação; azul
* 3-não validada; amarelo
* 4-aguardando aprovação; azul
* 5-aprovada; verde
* 6-não aprovada; amarelo
* 7-cancelada; vermelho
* 8-concluida; verde
*/
$('#t_dados').find('tr').each(function(indice){
switch($(this).children().eq(0).text())
{
case 'aguardando validação':
case 'aguardando aprovação':
$(this).prop('class','info');
break;
case 'não validada':
case 'não aprovada':
$(this).prop('class','warning');
break;
case 'aprovada':
case 'concluida':
$(this).prop('class','success');
break;
case 'cancelada':
$(this).prop('class','danger');
break;
};
});
}
Foram usadas as classes do Bootstrap 3.0 para tebelas: http://getbootstrap.com/css/#tables-contextual-classes
Após:

Visualização melhorada, com poucos comandos e processamento client-side, certamente uma boa pedida.
Neste caso específico, criamos uma função isolada que é chamada depois da execução do AJAX, porém, caso sua tabela já venha preenchida, podes chamá-la logo ao carregar a página, com esta sugestão (ou mesmo através de função anônima):
$( document ).ready(function(){
colore_tabela();
}); |
$( document ).ready(function(){
colore_tabela();
});
Para entender um pouco mais:
Usamos a função .each() para percorrer cada linha da tabela, em seguida, selecionamos com children(), seguido de eq(0) o texto da primeira célula, logo, se quiser alterar qual célula será testada, basta alterar o índice, onde 0 representa a primeira coluna, 1 a segunda e assim por diante.
Até a próxima.