CODEWITHSUNDEEP
javascript
S.Z5938
S.Z5938

Reputation: 15

Accessing td's within a tr in CSS

So I have a function that needs to handle a <tr></tr> and get the 3rd <td> tag in it

How would I access the 3rd <td> tag inside this

TRinput = the following

<tr>
  <td>Sup</td>
  <td>9</td>
  <td>5</td>
</tr>

how would i access the 3rd td

TRinput.(whatgoes here to access the 3rd td)

Upvotes: 0

Views: 196

Answers (3)

Ulysse BN
Ulysse BN

Reputation: 11386

If by third you mean the last one, there is a lastElementChild property that fits perfectly your need

const tr = document.getElementsByTagName('tr')[0]
console.log(tr.lastElementChild)
// content accessed with:
console.log(tr.lastElementChild.innerText)
<table>
<tr>
  <td>Sup</td>
  <td>9</td>
  <td>5</td>
</tr>
</table>

Upvotes: 0

Aliden
Aliden

Reputation: 451

Assuming that TRinput is the <tr>

TRinput.children[2]

will allow you to access the third cell if you're using vanilla JS. Lansana's answer covers the case if you're using jQuery

Upvotes: 1

Lansana Camara
Lansana Camara

Reputation: 9873

Do the following in your CSS:

tr > td:nth-child(3)

This says that for the 3rd direct child of a tr, apply a style.

If you are using something like jQuery, you can similary do:

$('tr > td:nth-child(3)')

Please check the CSS Pseudo-classes reference for more information.

Upvotes: 0

Related Questions