使用 jQuery 更高效地根据条件查找每个表行中的第 n 个单元格？

发布于 2024-12-13 04:18:45 字数 1616 浏览 0 评论 0原文

我们有一个表格，可以进行高级搜索。我想让表格突出显示他们搜索的每个术语的表格中的文本。例如：如果他们在“主题”字段中搜索特定单词，则应仅在“主题”列中突出显示该术语，即使该单词可能出现在另一列中。

我正在使用 .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);
    });
    //----------------------------------------------
}

编辑： 下面是上述代码的 JSFiddle 可供尝试： http://jsfiddle.net/ZLTdf/1/

原文

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/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

面如桃花 2024-12-20 04:18:45

这似乎对我有用，并且在计时时比 .each() 循环快大约 2 倍。我能够在大约 200 毫秒内突出显示 500 行的单独列中的 3 个唯一字符串，

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

这是否可以改进？

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?

回复收藏 0 原文

爱，才寂寞 2024-12-20 04:18:45

我认为没有任何方法可以避免循环，但您可以在执行循环之前缩小堆栈的大小。类似的东西：（

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

});

我在 http://jsfiddle.net/nicholasstephan/84DK9/)

可能会更好...

I don't think there's any way to avoid looping, but you can trim down the size of the stack before you do it. Something like:

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

});

(I've got a jsfiddle up at http://jsfiddle.net/nicholasstephan/84DK9/)

might work better...

回复收藏 0 原文