Question

我有2个表，结构非常相似，但是数据不同。

我有这个javascript，我发现允许我在搜索框中轻松搜索表格。我是一个javascript新手，这不是我在代码中的强项。

UIViewController

如果页面上只有一个表，则此代码可以很好地工作。我的问题是，我有2个。

以下是其中一个表格，另一个表格除了标题和实际数据内容外完全相同。

$(document).ready(function() {
    $(".search").keyup(function() {
        var searchTerm = $(".search").val();
        var listItem = $('.results tbody').children('tr');
        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        $.extend($.expr[':'], {
            'containsi': function(elem, i, match, array) {
                return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
            }
        });

        $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'false');
        });

        $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'true');
        });

        var jobCount = $('.results tbody tr[visible="true"]').length;
        $('.counter').text(jobCount + ' item');

        if (jobCount == '0') {
            $('.no-result').show();
        } else {
            $('.no-result').hide();
        }
    });
});

我尝试过在javascript中更改选择器之类的东西，但我无法让它工作。我最终打破它并恢复原始代码。我不知道该怎么做。

如何更改javascript代码以独立处理2个表？

JSFiddle：https://jsfiddle.net/vdemqwLx/

Answer 1

这里的问题是，使用$(".results tbody")和所有其他选择器，您正在选择两个表。您只需根据输入字段生成事件来选择正确的表。

为了减少对HTML结构的依赖，我建议您使用data属性来标识相应的表格。

<input type="text" class="search form-control" placeholder="Search:" data-table="table1" data-counter="counter1">
...
<span id="counter1" class="counter pull-right"></span>
<table id="table1" class="table table-responsive table-hover table-bordered results">
...

（与另一个相同）

然后在JS中，不是在整个文档中搜索，而是在这些

中搜索

//this should go outside
$.extend($.expr[':'], {
    'containsi': function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

$(document).ready(function() {
    $(".search").on("input",function() { //input will also detect paste, undo, etc.
        //this executes for both inputs, lets get the table and counter IDs
        var tableId=$(this).data("table");
        var tableElem=$("#"+tableId); //select the table by its ID
        var counterId=$(this).data("counter");

        var searchTerm = $(this).val(); //use this, otherwise you're always getting the value of the first .search
        var listItem = $(tableElem).find("tbody").children('tr'); //now find within the table (otherwise always selects the first .resulst)
        var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

        $(tableElem).find("tbody tr").not(":containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'false');
        });

        $(tableElem).find("tbody tr:containsi('" + searchSplit + "')").each(function(e) {
            $(this).attr('visible', 'true');
        });

        var jobCount = $(tableElem).find("tbody tr[visible='true']").length;
        $("#"+counterId).text(jobCount + ' item'); //the same with the counter

        if (jobCount == '0') {
            $(tableElem).find(".no-result").show();
        } else {
            $(tableElem).find(".no-result").hide();
        }
    });
});

测试一下，我直接写在这里。问我是否需要更多关于某事的解释。

Answer 2

这是在页面中重复组件的典型模式

通过遍历主容器并使用closest()和find()

查看该容器实例中的元素类来隔离实例

或者从主容器开始，使用each和find()来隔离它的内部元素

第一种方法

$(".search").keyup(function(){
   // get group instance
   var $fGroup = $(this).closest('.form-group'),
       //isolate rows within group
       $rows = $fGroup.find(".results tbody tr") 
       //visible rows filter
       var $visibleRows = $rows.filter(":containsi('" + searchSplit + "')").attr('visible','true');

       $rows.not($visibleRows).attr('visible','false');
      // no-result instance
      $fgroup.find( ('.no-result').toggle($visibleRows.length);

});

第二种方法

$('.form-group').each(function() {
  var $fGroup = $(this);
  // apply event listener to instance of search
  $fGroup.find(".search").keyup(function() {

    var $rows = $fGroup.find(".results tbody tr")
      //visible rows filter
    var $visibleRows = $rows.filter(":containsi('" + searchSplit + "')").attr('visible', 'true');

    $rows.not($visibleRows).attr('visible', 'false');
    // no-result instance
    $fgroup.find('.no-result').toggle($visibleRows.length);


  });
})

在2个类似的表上使用javascript表搜索

2 个答案: