jQuery: How to select the values from the table's column based on tables header only

Question

Hello, I have a table with header ID. I need to select all the fields under this header. I don't have access to the source code and no classes are used in this table. Any idea on how to get this done?

Answer 1

You should use the :eq(index) filter.

After having determined the index of the column you want to select (let's call it idx), you can do:

$('#yourTableID tr').each(function(){
  // for each row:
  var myField = $(this).children('td:eq('+idx+')');
  // do stuff with the selected field
});

Answer 2

To get the first column:

$(function() {
   var col = $("td:nth-child(1)");
});

Answer 3

Most straightforward would be to get the position (index) of the header in the row and then access the value of all cells at the same column index.

$('#table th').click(function() {
    var th = $(this);
    var index = $('th', th.parents('tr')).index(th);
    var column = $('tbody td:nth-child(' + (index + 1) + ')', th.parents('table'));
    var values = column.map(function() {
        return $(this).text();
    });
    alert($.makeArray(values));
});

Which is based on this example:

<table id="table">
    <thead>
        <tr><th>head1</th><th>head2</th><th>head3</th></tr>
    </thead>
    <tbody>
        <tr><td>cell1a</td><td>cell2a</td><td>cell3a</td></tr>
        <tr><td>cell1b</td><td>cell2b</td><td>cell3b</td></tr>
        <tr><td>cell1c</td><td>cell2c</td><td>cell3c</td></tr>
    </tbody>
</table>