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.
Share Improve this question asked Jan 2, 2015 at 10:16 AbhiAbhi 1062 silver badges8 bronze badges 4- 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
id
s,tr
s haverowIndex
property, andtd
s havecellIndex
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
Reset to default 3you 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>