Question

我在下面有以下代码...它需要一个搜索字段，并迅速在表中搜索匹配项，并隐藏所有其他结果。现在，此代码适用于单个搜索字段（具有.search类）和单个表（具有ID #SearchableTbl）。

$(document).ready(function(){
    $('.search').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#SearchableTbl tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

我不了解javascript，因此我不确定如何使此功能适用于多个表。因此，如果第一个搜索字段是.search1（而不仅仅是.search），第二个搜索字段是.search2。并且，要搜索的表分别是＃SearchableTbl1和＃SearchableTbl2。

有人可以帮我修改代码，使其适用于许多（不仅仅是2个）表吗？就像我说的，我不了解javascript（但是我确实了解一点PHP），所以我正在尝试做类似的事情（下面是PHP和Javascript的混搭，这肯定行不通，但应该可以我的观点对...）。

$(document).ready(function(){
 for($var=1; $var<10; $var++;) {  
   $('.search($var)').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#SearchableTbl($var) tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
  }
});

谢谢！

Answer 1

使用jQuery时，它取决于您的dom结构，因此将表包装并在div中搜索输入（或“数据表”组件的任何其他内容），然后输入一个简单的事实即可使用特定输入找到父元素，然后find()表。

$(document).ready(function(){
    $('.data-table input').on('keyup',function(){
       // find the parent
       var parent = $(this).closest('.data-table')

        var searchTerm = $(this).val().toLowerCase();

        $(parent).find('table tbody tr').each(function(){
            var lineStr = $(this).text().toLowerCase();
            if(lineStr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

<div class="data-table">
  <input type="text"/>

  <table>
   ...
  <table>
</div>

更改javascript，使其适用于众多变量

1 个答案: