JQuery / Javascript - How to find the index of a table header by the header text

Question

What is a good way to find the index of column by it's display text?

e.g.

<table>
   <tr>
     <td>ID</td>
     <td>Name</td>
     <td>Age</td>
   </tr>
   <tr>
      ...
   </tr>
</table>

I would like to have something like

var nameIndex = getColIndex('Name'); // nameIndex = 1

Is there a quick / good way to do it? (Doesn't have to be jQuery, but would be nice)

I'd be curious to know the larger context of your question. Are you anticipating the Name to be in a different column, or will it always be in 1? — user1106925
– user1106925, Commented Mar 9, 2012 at 19:37
Yep, the column might move around... that's why I wanted to find it by name (which is immutable) — Eran Medan
– Eran Medan, Commented Mar 9, 2012 at 19:40
Will it be possible for other columns to contain a substring of Name? Or how about whitespace. Is there any chance that there could be leading or trailing whitespace, like line breaks? — user1106925
– user1106925, Commented Mar 9, 2012 at 19:41
Good questions. I guess it should be exact match... I like your thinking — Eran Medan
– Eran Medan, Commented Mar 9, 2012 at 19:46
So many things that could go wrong. ;-) If there could be leading/trailing space, then do $.trim($(this).text()) == 'Name' Or a slightly more optimized version would be $.trim($.text([this])) == 'Name' — user1106925
– user1106925, Commented Mar 9, 2012 at 20:08

David Thomas · Accepted Answer · 2012-03-09 19:41:55Z

22

The following both seem to work, in Chromium 17/Ubuntu 11.04:

$('tr td').filter(
    function(){
        return $(this).text() == 'Name';
    }).index();

JS Fiddle demo.

Or:

$('td:contains("Name")').index();

JS Fiddle demo.

Edited in response to OP's question, in comments, below:

but how do I limit it to the first row?

To limit it to the first row, simply use the :first selector:

$('tr:first td')

Giving:

$('tr:first td').filter(
    function(){
        return $(this).text() == 'Name';
    }).index();

JS Fiddle demo.

References:

edited Mar 9, 2012 at 19:41

answered Mar 9, 2012 at 19:35

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eran Medan Over a year ago

Thanks, but how do I limit it to the first row? this is where I got a little confused

Eran Medan Over a year ago

I added this to your solution to limit to the first row... var index = $('tr:eq(0) td:contains("Name")').index(); jsfiddle.net/9uPWe

Justice Erolin Over a year ago

The selector would be $('tr:eq(0) td')

David Thomas Over a year ago

@trante: I'm glad to have helped! :)

Jasper · Accepted Answer · 2012-03-09 19:38:34Z

//select the first TR element, then select its children (the TDs),
//then filter them down to only the one that contains a certain string
var theIndex = $('tr').first().children().filter(function () {
    return ($(this).text() == 'ID');
}).index();

When passing .filter() a function, if you return true for an index, then it will be kept in the selection, and if you return false then that index will be removed from the selection: http://api.jquery.com/filter

This will limit the search to the first row and give the index of the column with the specified search text (this code used ID).

Note that .index(), when used like above, will return the index of the current selection based on its sibling elements: http://api.jquery.com/index

Justice Erolin · Accepted Answer · 2012-03-09 19:41:28Z

1

http://jsfiddle.net/justiceerolin/FdhcV/

$(function(){
    $('#search').click(function(){
        $('td').each(function(index){
            if ($(this).text() == $('#lookup').val()){
                console.log(index)
            }
        });    
    });   
});

answered Mar 9, 2012 at 19:41

Justice Erolin

2,89921 silver badges19 bronze badges

Collectives™ on Stack Overflow

JQuery / Javascript - How to find the index of a table header by the header text

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related