Efficient way of finding index of row?

Question

I am getting the index of a row by doing this:

row.parent().children("tr").index(row)

Is there a more efficient way to find the index? I have hundreds of rows so it is killing my performance that I have to select all rows just to find the index.

possible duplicate http://stackoverflow.com/questions/788225/table-row-and-column-number-in-jquery — Dhiraj, Apr 05 '12 at 06:50

score 5 · Accepted Answer · answered Apr 05 '12 at 06:59

5

How about row.prevAll().length?

answered Apr 05 '12 at 06:59

Tuan

5,382
1
22
17

+1 for using pure Javascript in a performance issue scenario! I was able to use this: row[0].rowIndex – TruMan1 Apr 05 '12 at 07:47

score 0 · Answer 2 · answered Apr 05 '12 at 06:50

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        console.log($("tr").index($("#my")));
    })
    </script>
</head>
<body>
    <table border="0" cellspacing="5" cellpadding="5" id="tbl">
        <tr><th>Header</th></tr>
        <tr><td>Data</td></tr>
        <tr id="my"><th>Header</th></tr>
        <tr><th>Header</th></tr>
        <tr><td>Data</td></tr>
    </table>
</body>
</html>

Hope that helps. Cheers.

No -1, but you could just get away with `$("#my").index();`, there is no need to overqualify — Oleg, Apr 05 '12 at 07:03

score 0 · Answer 3 · answered Apr 05 '12 at 06:54

Id attribute is the most fastest way to parse any html. You could provide all your rows with an Id.

Although the index method will determine the index among of the siblings elements, which could be faster

row.parent("tr").index();

see this example http://jsfiddle.net/shNrS/

score 0 · Answer 4 · answered Apr 05 '12 at 07:00

If you are getting the reference to the row somehow (click handler etc) than there is no additional overhead in looking up that element, just .index() it and profit (although watch out for multiple tbody elements which are valid but would add complexity to your script)

If you are indexing all tr elements at runtime, might as well cache it in jquery data for future use!

jfriend00 · Answer 5 · 2012-04-05T07:37:32.027

The fastest way here is probably using plain javascript:

function getRowIndex(elem) {
    var index = 0;
    while (elem = elem.previousSibling) {
        if (elem.tagName == "TR") {
            ++index;
        }
    }
    return(index);
}

Working demo: http://jsfiddle.net/jfriend00/y4anN/

If you had to do this repeatedly on a large table that wasn't changing dynamically, then you could just pre-number the rows once with a custom attribute and from then on, all you'd have to do it retrieve the custom attribute from any row.

You would pre-number all the rows with a custom attribute like this:

function numberRows(table) {
    var rows = table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        rows[i].dataIndex = i;
    }
}

And, then you can just obtain the index number from any given row like this:

row.dataIndex

Working demo: http://jsfiddle.net/jfriend00/CR2Wk/

Efficient way of finding index of row?

5 Answers5