I want to find all td's by index (1) in every row. How can I acplish this?

My HTML:

<table>
    <thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
    <tbody>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
    </tbody>
</table>

Javascript:

var index = 1;
$('tbody').children().children(':eq(' + index + ')');

This code doesn't work because it gets all children of the row and THEN gets the index. I need every second TD in every row.

I want to find all td's by index (1) in every row. How can I acplish this?

My HTML:

<table>
    <thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
    <tbody>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
    </tbody>
</table>

Javascript:

var index = 1;
$('tbody').children().children(':eq(' + index + ')');

This code doesn't work because it gets all children of the row and THEN gets the index. I need every second TD in every row.

• javascript
• jquery

• 1 Array.from($('table').prop("rows"), row => row.cells[1]) – Bergi Commented Aug 1, 2017 at 20:43
• @Bergi That is a slick solution. Learned some things of that little piece of code. – A1rPun Commented Aug 3, 2017 at 9:31

5 Answers 5

You can use the nth-child selector

var index = 1;
$('tbody').find('td:nth-child('+(index+1)+')');

Demo: Fiddle

Or just plain vanilla-js

var index = 2,
    tdElArr = document.querySelectorAll('table tbody tr td:nth-child(' + index + ')');

// to test this:
for(var i=tdElArr.length;i--;){
    tdElArr[i].style.backgroundColor = '#cdedff'
}

table {border-collapse: collapse;}
table, th, td {border: 1px solid black;}

<table>
    <thead><tr><th>Maandag</th><th>Dinsdag</th><th>Woensdag</th><th>Donderdag</th><th>Vrijdag</th></tr></thead>
    <tbody>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
        <tr><td></td><td>THIS</td><td></td><td></td><td></td></tr>
    </tbody>
</table>

Working example http://jsfiddle/LZH87/

$('tbody').children().children('td:nth-child(2)').each(function() {
    $(this).css({background: 'blue'});
});

I just added the css background blue to confirm that it works

This could also work (jsfiddle example)

$('tbody').children().each(function(){
    $(this).find('td:odd').css({background: 'red'});
});

It's using the :odd or :even selectors in jQuery.

Try this

$('tbody').find('tr').each(function(i){
    alert($('tbody').find('tr:eq('+i+')').find('td:eq(1)').text())
})

Demo link http://jsfiddle/dhana36/YT3CD/