Quero estudar mais sobre as <table>
<tr>
<td>
etc, para otimizar meus projetos.
Exemplo: Tenho 4 <tr>
com 2 <td>
cada, ao aplicar uma formula em jQuery por exemplo, que some o primeiro <td>
com o segundo <td>
de cada <tr>
utilizando pouca formula. Quero saber como referenciar o primeiro com o segundo de cada linha.
Alguma idéia?
1 Resposta
Para referenciar a primeira td
de cada tr
, você pode usar duas maneiras:
1ª: com first-child
:
$("tbody tr td:first-child").css("color","red");
:first-child
é uma pseudo-classe que, neste caso, referencia toda primeiratd
filha de umatr
natbody
.
2ª: com nth-child(1)
:
$("tbody tr td:nth-child(1)").css("color","red");
Para referenciar a segunda td
de cada tr
, você pode usar nth-child(2)
:
$("tbody tr td:nth-child(2)").css("color","red");
Para referenciar a terceira td
em diante, basta trocar o index para 3, 4 em diante:
$("tbody tr td:nth-child(index)").css("color","red");
Lembrado que o index de
nth-child()
no jQuery começa com 1.
-
isso mesmo!! existe algum nome para eu poder me aprofundar, estudar esses referenciamentos? Para eu saber se ele só funciona com <tr>, ou se funciona com <div> também.. Commented 29/10/2017 às 2:12
-
1@ThiagoKoller Sim. Estude pseudo-classes e pseudo-elementos e também seletores CSS: developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-classes e maujor.com/tutorial/guia-completo-seletores-css3.php– SamCommented 29/10/2017 às 2:16
-
1@ThiagoKoller Interessante também esta resposta: pt.stackoverflow.com/a/250488/8063– SamCommented 29/10/2017 às 2:20
-
<td>
de cada<tr>
é dado por$("tr").children().first()
. É isso que queria saber? Ou até mesmo tudo no seletor, com$("tr td:first-child")
. Neste ultimo caso é puramente CSS o Jquery nem é relevante