I have a table with two rows and three columns:

<table>
  <tr id='a'>
    <td id='aa'>Cell A</td>
    <td id='ab'>Cell B</td>
    <td id='ac'>Cell C</td>
  </tr>
  <tr id='b'>
    <td id='ba'>Cell A</td>
    <td id='bb'>Cell B</td>
    <td id='bc'>Cell C</td>
  </tr>
</table>

How can I get all the <td> ids under a particular <tr> using javascript or jquery?

Thanks in advance.

I have a table with two rows and three columns:

<table>
  <tr id='a'>
    <td id='aa'>Cell A</td>
    <td id='ab'>Cell B</td>
    <td id='ac'>Cell C</td>
  </tr>
  <tr id='b'>
    <td id='ba'>Cell A</td>
    <td id='bb'>Cell B</td>
    <td id='bc'>Cell C</td>
  </tr>
</table>

How can I get all the <td> ids under a particular <tr> using javascript or jquery?

Thanks in advance.

• javascript
• jquery
• html
• jsp
• html-table

• you cannot get all td ids once you you to loop through. – Manoj Sharma Commented Jan 2, 2015 at 10:18
• 3 Why to use ids, trs have rowIndex property, and tds have cellIndex property. – Teemu Commented Jan 2, 2015 at 10:22
• you may use class attribute for tr and id for td Class Selector (“.class”) Selects all elements with the given class. – Akash kumar Commented Jan 2, 2015 at 10:24
• jQuery has selectors for that. See api.jquery./category/selectors and api.jquery./child-selector – nha Commented Jan 2, 2015 at 10:27

4 Answers 4

you should loop through all tds inside a row this code for example to get td ids from #a

$(document).ready(function(){
    $('table #a td').each(function(){
        alert($(this).attr('id'));
    });
}); 

SEE DEMO

you should loop through all tds inside a row

$(document).ready(function(){
    $('table #a td').each(function(){
        alert($(this).attr('id'));
    });
}); 

Get all IDs of <td>s under <tr id='a'> this way:

$('#a td').each(function(td){
  console.log($(this).attr('id'));  // check your console after running this
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id='a'>
    <td id='aa'>Cell A</td>
    <td id='ab'>Cell B</td>
    <td id='ac'>Cell C</td>
  </tr>
  <tr id='b'>
    <td id='ba'>Cell A</td>
    <td id='bb'>Cell B</td>
    <td id='bc'>Cell C</td>
  </tr>
</table>

If you want it for the other row, just change the <tr> ID.

Learn more:

• .each() | jQuery
• .attr() | jQuery

You can use map() which return an array of matched id's as shown below:

var idArray = $('#a td').map(function(i,elm) {
  return elm.id;
}).get();
console.log(idArray);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id='a'>
    <td id='aa'>Cell A</td>
    <td id='ab'>Cell B</td>
    <td id='ac'>Cell C</td>
  </tr>
  <tr id='b'>
    <td id='ba'>Cell A</td>
    <td id='bb'>Cell B</td>
    <td id='bc'>Cell C</td>
  </tr>
</table>