Jqueryを使用してTABLE内の単語を部分的に検索する

Question

JavaScriptテーブルを使用してHTMLテーブルの列を検索します。しかし、私はテーブルセルの内容の最初の文字をタイプするだけで値を検索することができます。

私のデータの例を以下に示します。

Iはカラム2の値を検索する場合、所望のテーブルセルは、それが必要ようにポップアップします。

たとえば、値またはを検索すると、何も起こりません。

|column1|column2| 
__________________ 
|000|123 456| 
|001|123 456| 

私の現在のJavascript：

<script type="text/javascript"> 
     $("#searchn").on("keyup", function() { 
      var value = $(this).val(); 

      $("table tr").each(function(index) { 
       if (index !== 0) { 

        $row = $(this); 

        var id = $row.find("td").children().eq(1).text(); 

        if (id.indexOf(value) !== 0) { 
         $row.hide(); 
        } 
        else { 
         $row.show(); 
        } 
       } 
      }); 
     }); 
     </script> 

Answer 1

それがあった場合、あなたが探している値が発見され、試合のゼロベースのインデックスされていない場合、あなたのロジックはindexOf()戻り-1として欠陥があります見つかりました。このため、ifステートメントには、値の先頭で一致するものが除外されるため、脆弱です。

あなたはこの代わりに、あなたのif条件を変更する必要があります。

if (id.indexOf(value) !== -1) { 
    $row.hide(); 
} 
else { 
    $row.show(); 
} 

はまた、あなたがこれを短縮することができることに注意してください代わりにfilter()とtoggle()を使用して：よう

$("#searchn").on("keyup", function() { 
 
    var value = $(this).val(); 
 

 
    $("table tr:not(:first)").show().filter(function(index) { 
 
     return $(this).find("td:eq(1)").text().indexOf(value) == -1; 
 
    }).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>000</td> 
 
    <td>123 456</td> 
 
    </tr> 
 
    <tr> 
 
    <td>001</td> 
 
    <td>123 456</td> 
 
    </tr> 
 
</table> 
 

 
<input id="searchn" />