A more efficient mode with jQuery to find the nth cell in each table row according to a condition?

advertisements

We have a table, that allows for an advanced search. I'd like to get the table to highlight the text in the table of each term them searched for. For example: if they searched for a specific word in the "subject" field, it should only highlight that term in the "subject" column even though that word might appear in another column.

I am using a highlighting plugin for the .highlight() method - but I'm mostly worried about an efficient way to select the proper table cells. What I have works, but it's slow with several hundred rows. I feel like there's a better way to do this without an .each() loop.

//Select the table
var $table = $("#myTable");

//Examples: The users' search terms
var sFrom = "example";
var sTo = "example";
var sSubject = "example";

//Make sure there is at least 1 term to search for
if(sFrom !== "" || sTo !== "" || sSubject !== ""){

    //Find the index of each column based on a class set on the table header
    //(the number of columns could change from page to page)
    var $headers = $table.find("thead tr").children();
    var iFrom = $headers.filter(".js-from").index();
    var iTo = $headers.filter(".js-to").index();
    var iSubject = $headers.filter(".js-subject").index();

    //----------------------------------------------
    //This is the critical part!
    //----------------------------------------------
    //Loop through each table row and select each
    $table.find("tbody tr").each(function (i, row) {
        var $thisRowCells = $(row).children();
        if (sFrom !== "") $thisRowCells.eq(iFrom).highlight(sFrom);
        if (sTo !== "") $thisRowCells.eq(iTo).highlight(sTo);
        if (sSubject !== "") $thisRowCells.eq(iSubject).highlight(sSubject);
    });
    //----------------------------------------------
}

EDIT: Here's a JSFiddle of the above code to try out: http://jsfiddle.net/ZLTdf/1/


This seems to work for me and be about 2x faster than the .each() loop when timed. I was able to highlight 3 unique strings in seperate columns for 500 rows in ~200ms

var $headers = $table.find("thead th");
var iFrom = $headers.filter(".js-from").index()+1;
var iTo = $headers.filter(".js-to").index()+1;
var iSubject = $headers.filter(".js-subject").index()+1;

if (sFrom!== "") $table.find("tr td:nth-child("+iFrom+")").highlight(sFrom);
if (sTo!== "") $table.find("tr td:nth-child("+iTo+")").highlight(sTo);
if (sSubject!== "") $table.find("tr td:nth-child("+iSubject+")").highlight(sSubject);

Can this be improved at all?