7

Existe algum seletor CSS ou do jQuery que pegue uma coluna de uma tabela (cada td da coluna)?

Ou, caso não haja um seletor simples que consiga fazer isso, dá pra fazer com pouco código em jQuery/JavaScript?

2
  • pode ser mais expecifico? por que não usar uma classe e pegar essa clasee através de CSS ou JQuery? Commented 20/03/2014 às 19:24
  • Porque queria aprender um modo generico.
    – Joao Paulo
    Commented 20/03/2014 às 19:25

2 Respostas 2

9

Se nenhum dos TDs possuir um colspan então é possível fazer isso usando a pseudo-classe :nth-child:

Exemplo para selecionar todos os terceiros TDs:

table td:nth-child(3) {
    /* estilo */
}

Referência na MDN

Suporte dos navegadores:

O jQuery não possui problemas com isso, funciona nos browseres suportados pela biblioteca.

Mas em termos de CSS, funciona a partir do IE 9. Você poderia usar o jQuery no IE 8 ou menor, para atribuir o CSS que quiser usando essa pseudo-classe, ou então, usar o seguinte CSS que usa a pseudo-classe :first-child e o operador de proximidade (chamado de Adjacent sibling selectors):

table td:first-child + td + td {
    /* estilo */
}
5
  • 2
    +1 Eu estava tentando fazer com :eq, mas não funcionou, mas o seu método funciona. jsfiddle (Nota: é bom frisar que esse índice é baseado em 1, não em 0)
    – mgibsonbr
    Commented 20/03/2014 às 19:26
  • @mgibsonbr: você quer dizer que o índice do :eq é zero based, não é? Commented 20/03/2014 às 19:32
  • Sim o :eq é. Mas pelo fiddle acima, o :nth-child é one based.
    – mgibsonbr
    Commented 20/03/2014 às 19:33
  • A outra resposta me preocupou, pois preciso usar em navegadores antigos. Se souber alguma alternativa pode acrescentar a resposta?
    – Joao Paulo
    Commented 20/03/2014 às 19:37
  • @JoaoPaulo Se você fizer via jQuery - em vez de via CSS - ele cuida desses detalhes pra você, não? (simulando as funcionalidades que o navegador não suporta nativamente)
    – mgibsonbr
    Commented 20/03/2014 às 19:48
1

A resposta do @Miguel Angelo vai resolver seu problema.

Porém, como é CSS3 http://www.w3schools.com/cssref/sel_nth-child.asp

Você não poderá usar em navegadores antigos.

Você poderia usar uma classe pra definir uma coluna especifica ex:

<table style="width:300px">
<tr>
  <td class="Coluna1">Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td class="Coluna1">Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

Após isso você pode pegar essa coluna por CSS ou por Jquery

CSS

.Coluna1{
//Codigo aqui
}

JQuery

$('.Coluna1)
1
  • Valeu a intenção, mas assim eu já sei. Era justamente pra conhecer algum modo mais genérico que possa ser aplicado rapidamente em qualquer página.
    – Joao Paulo
    Commented 20/03/2014 às 19:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .