时间戳

首页 > 解决方案 > 更改 javascript，使其适用于众多变量

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

问题描述

我在下面有以下代码......它需要一个搜索字段，并快速搜索表中匹配的项目，并隐藏所有其他结果。现在，此代码适用于单个搜索字段（使用类 .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();
            }
        });
    });
  }
});

谢谢！

标签： javascriptjquery

解决方案

使用 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>

推荐阅读