使用jquery在表中进行多列搜索（需要算法）？

Question

我需要在表格中编写多列搜索。由于某些原因（支持问题），我无法使用数据表和表格排序器插件。我需要你在算法部分的帮助，我怎么能进行多列搜索。请不要给我已经创建的插件的链接，因为我已经更改了表结构，我无法使用它们。我需要这样的东西

datatables.net/examples/api/multi_filter.html

如果我能得到它的算法如何工作的提示，我将为我编写相同的功能。我已编写此代码，但它正在进行单列搜索，当我在另一列中搜索时，它会重置多列中的搜索。

function searchonKeyPress(input_text_box)
{

  var query =   $.trim(input_text_box.val());
  query = query.replace(/ /gi, '|');
  if(query=='undefined')
  return false;
  var index_input = input_text_box.closest("th").index();
  index = $("#freeze-tableFreeze .GridviewScrollItem tr:eq("+index_input+") td").length;    
  $("#freeze-tableFreeze .GridviewScrollItem").each(function() {
  var tr_ident = $(this).attr('tr_ident');  
  var column_text = $(".GridviewScrollItem[tr_ident='"+tr_ident+"'] td:eq("+index_input+")").text();
  (column_text.search(new RegExp(query, "i")) < 0) ?        $(this).hide().removeClass('visible') : $(this).show().addClass('visible');

  });
  pagignation(1);
}

我需要这样的东西：

Answer 1

这里最简单的解决方案是选择表中的所有td并使用jQuery :contains()选择器和搜索短语对其进行过滤，并突出显示行/列。

查看this简单示例。这将选择关键字“one”的所有单元格。

$('td:contains(one)').css('color', 'red');

更新：

带有搜索框代码的新sample。

Answer 2

对于过滤，您可以使用JQuery并手动迭代html标记，以显示/隐藏某些依赖于过滤条件的行......

我构建了一个如何实现这一目标的小例子。因为您没有提供任何代码，所以您必须采用它

http://jsfiddle.net/Elak/FxBhQ/

JQuery部分并不过分复杂，因为你必须将它扩展到你想拥有的功能......

$(document).ready(function () {
    $(".searchBox").change(function () {
        var search = $(this).val();
        $(".column").each(function () {

            if ($(this).text().indexOf(search)) {
                $(this).parent().hide();
            }
        });
    });
});

Answer 3

如果要搜索所有表格，请尝试此操作：DEMO

如果您想按列搜索 ，请尝试：DEMO

HTML：

<table>
    <thead>
        <tr>
            <th>One<input type='text' class='search' /></th>
            <th>Two<input type='text' class='search' /></th>
            <th>Three<input type='text' class='search' /></th>
            <th>Four<input type='text' class='search' /></th>
        </tr>
    </thead>
    .........

JQuery的：

$('.search').blur(function(){
$("td").removeClass('selected','');
var index=$(this).index('.search')+1;

    $('.search').each(function(index , val){

        var tag=$(val).val();
       if(tag!='') $("tr td:contains("+tag+")").addClass('selected');

    });

});