テーブル - jQueryを使用したライブ検索

Question

私はデータテーブルでライブ検索のソリューションを開発しています。

私はJimを検索する場合

:-)期待どおりに動作しますが、私はCareyを検索したとき、何も結果が表示されません。どうしてこれなの？ :-(

デモ：理由は次の行のhttp://jsfiddle.net/L1d7naem/

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

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

 
      $row = $(this); 
 

 
      var id = $row.find("td:first").text(); 
 

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

table, tr, td, th{ 
 
    border: 1px solid blue; 
 
    padding: 2px; 
 
} 
 

 
table th{ 
 
    background-color: #999999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr> 
 
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr> 
 
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr> 
 
</table> 
 
<br /> 
 
<input type="text" id="search" placeholder=" live search"></input>

Answer 1

あなたが望む行動は（も...状態で< 0に注意してください）各ループで、次の修正を達成することができる。

var id = $.map($row.find('td'), function(element) { 
    return $(element).text() 
}).join(' '); 

if (id.indexOf(value) < 0) { 
    $row.hide(); 
} else { 
    $row.show(); 
} 

Answer 2

その：あなただけのテーブルの最初の列に取り組んでいる

var id = $row.find("td:first").text(); 

と"キャリー"はテーブルの第2欄にある

Answer 3

これを試してみてください：

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

$("table td").each(function() { 
    if(value.match($(this).text)) { 
     console.log($(this).text()); 
    } 

    else { 
     $("table").hide(); 
    } 
}); 
}); 

は、すべてのtd要素とのマッチングを試してみてください。

Answer 4

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

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

      $row = $(this); 

      var id = $.map($row.find('td'), function(element) { 
    return $(element).text() 
}).join(' '); 





      if (id.indexOf(value) <0) { 
       $row.hide(); 
      } 
      else { 
       $row.show(); 
      } 
     } 
    }); 
}); 

http://jsfiddle.net/Lyxex4tp/

Answer 5

はこれを試してみてください。すべての列を反復処理しなければならず、each()ファンクション内のreturn false;を使用してループをエスケープするだけの一致を見つけると、また、indexOfは、文字列が見つからない場合は-1を返します。この作品

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

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

 
      $row = $(this); 
 

 
      $row.find("td").each(function(){ 
 
       var id = $(this).text(); 
 
       if (id.indexOf(value) < 0) { 
 
       $row.hide(); 
 
       } 
 
       else { 
 
       $row.show(); 
 
       return false; 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
});

table, tr, td, th{ 
 
    border: 1px solid blue; 
 
    padding: 2px; 
 
} 
 

 
table th{ 
 
    background-color: #999999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr> 
 
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr> 
 
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr> 
 
</table> 
 
<br /> 
 
<input type="text" id="search" placeholder=" live search"></input>

Answer 6

希望、ここで

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

$("table tr").each(function(index) { 
    if (index !== 0) { 
     var id = $(this).children().text() 
     if (id.indexOf(value) < 0) { 
      $(this).hide(); 
     }else { 
      $(this).show(); 
     } 
    } 
}); 
}); 

が作業フィドルこれを行うためのプラグインがありますhttps://jsfiddle.net/44Lux7ze/