Более эффективный способ с помощью jQuery найти n-ю ячейку в каждой строке таблицы на основе условия?

Question

У нас есть таблица, которая позволяет расширенный поиск. Я хотел бы получить таблицу, чтобы выделить текст в таблице каждого термина, который они искали. Например: если они искали определенное слово в поле «тема», ему следует выделить только этот термин в столбце «тема», даже если это слово может появиться в другом столбце.

Я использую подсвечивающий плагин для метода .highlight() - но Меня больше всего беспокоит эффективный способ выбора правильных ячеек таблицы. То, что у меня работает , но это медленно с несколькими сотнями рядов. Я чувствую, что есть лучший способ сделать это без .each() цикла.

//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: Вот пример JSFiddle приведенного выше кода: http://jsfiddle.net/ZLTdf/1/

Answer 1

Кажется, это работает для меня и примерно в 2 раза быстрее, чем цикл .each() при синхронизации.Мне удалось выделить 3 уникальные строки в отдельных столбцах для 500 строк за ~ 200 мс

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);

Можно ли вообще это улучшить?

Answer 2

IE8 не выдержал испытания jsfiddle.http://jsfiddle.net/ZLTdf/

Answer 3

Я не думаю, что есть какой-либо способ избежать зацикливания, но вы можете сократить размер стека, прежде чем сделать это.Что-то вроде:

var input = $(e.currentTarget),
    index = input.parent().index(),
    needle = input.val().toLowerCase(),
    haystack = $("td:nth-child(" + (index+1) + ")");

haystack.each(function() {
    var td = $(this);

    if(td.text().toLowerCase().indexOf( needle ) != -1)
        td.highlight(needle);
    else
        td.highlight(needle);

});

(у меня есть jsfiddle на http://jsfiddle.net/nicholasstephan/84DK9/)

может работать лучше ...