Distribuição de zebra em apenas uma coluna da tabela
-
13-12-2019 - |
Pergunta
Eu tenho uma tabela que usa o Table Sorter e o Zebra Striping para as linhas da tabela.Eu gostaria de adicionar listras de zebra a apenas uma das COLUNAS da tabela para dar um pouco de ênfase.assim:
Solução
Se você conhece o índice da coluna que deseja distribuir, poderá fazê-lo apenas em CSS, usando seletores :nth-of-type como este:
tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }
(Onde 3
está sendo usado como espaço reservado para o índice da coluna de destino)
Outra opção seria colocar uma classe no cabeçalho (ou primeiro td) da coluna que você deseja distribuir e depois usar JS para distribuir os outros tds na mesma coluna:
var col_to_stripe = $('th.stripe-this-one').index();
$('table.selectively-stripe').find('tr:odd')
.each(function() {
$(this).children('td')
.eq(col_to_stripe)
.css('background', 'pink');
});
A classe não é necessária, pois obviamente você pode simplesmente colocar o índice da coluna desejado como na abordagem CSS pura, mas é melhor para maior clareza do código.
demonstração aqui: http://jsbin.com/axutal/2/edit
Outras dicas
verifique isso link
Isso pode ser feito usando jQuery sem fornecer nomes de classes ou IDs.
$('tr:odd td:nth-child(4)').css('background','#999999'); /* For odd td's */
$('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */
Para mais informações sobre isso seletor jQuery passar por isso link
Você precisará de um nome de classe adicional e correspondente declaração CSS para o TDS nessa coluna.