HTMLテーブルの検索

Question

私はHTMLでテーブルを作成し、検索ボックスを統合したいと思います。それ、どうやったら出来るの？良いjQueryプラグインをお勧めしますか、完全なチュートリアルをお勧めしますか？

Answer 1

は、テーブルを検索することは簡単である：のjQueryを使用して

$('#table1 tr td').each(function(){ 
    if (this.innerHTML.indexOf(searchKeyword) > -1) 
     this.style.color = 'yellow' //found within this td so highlight it 
}); 

Answer 2

迅速かつ汚いアプローチ、次の（X）HTMLで

$(document).ready(
    function(){ 
     $('#searchbox').keyup(
      function(){ 
       var searchText = $(this).val(); 
       if (searchText.length > 0){ 
        $('td:contains(' + searchText +')') 
         .css('background-color','#f00'); 
        $('td:not(:contains('+searchText+'))') 
         .css('background-color','#fff'); 
       } 
      }); 
    }); 

：

<table> 
    <thead> 
     <tr> 
      <td colspan="2"> 
       <label for="searchbox">Search:</label> 
       <input type="text" id="searchbox" /> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Something</td> 
      <td>More text</td> 
     </tr> 
     <tr> 
      <td>Lorem ipsum</td> 
      <td>blah?</td> 
     </tr> 
    </tbody> 
</table> 

JS Fiddle demo。

---

のjQuery自体にCSSを設定する代わりに、addClass()/removeClass()を使用するようにを編集：

$(document).ready(
    function(){ 
     $('#searchbox').keyup(
      function(){ 
       var searchText = $(this).val(); 
       if (searchText.length > 0){ 
        $('td:contains(' + searchText +')') 
         .addClass('searchResult'); 
        $('td:not(:contains('+searchText+'))') 
         .removeClass('searchResult'); 
       } 
       else if (searchText.length == 0) { 
        $('td.searchResult') 
         .removeClass('searchResult'); 
       } 
      }); 
    }); 

Demo at JS Fiddle。

のjQuery：

---

では、次を使用することができ、検索結果が含まれていないテーブルセルをフェードアウトする

$(document).ready(
    function(){ 
     $('#searchbox').keyup(
      function(){ 
       var searchText = $(this).val(); 

       if (searchText.length > 0) { 
        $('tbody td:contains('+searchText+')') 
         .addClass('searchResult'); 
        $('.searchResult') 
         .not(':contains('+searchText+')') 
         .removeClass('searchResult'); 

        $('tbody td') 
         .not(':contains('+searchText+')') 
         .addClass('faded'); 
        $('.faded:contains('+searchText+')') 
         .removeClass('faded'); 
       } 
       else if (searchText.length == 0) { 
        $('.searchResult').removeClass('searchResult'); 
        $('.faded').removeClass('faded'); 
       } 
      }); 
    }); 

CSS：

td.faded { 
    opacity: 0.2; 
} 

Demo at JS Fiddle 。

Answer 3

ありがとうDavid Thomas

良い解決策。 以下は完璧です。

$(document).ready(
function(){ 
    $('#searchbox').keyup(
     function(){ 
      var searchText = $(this).val(); 

      if (searchText.length > 0) { 
       $('tbody td:contains('+searchText+')') 
        .addClass('searchResult'); 
       $('.searchResult') 
        .not(':contains('+searchText+')') 
        .removeClass('searchResult'); 

       $('tbody td') 
        .not(':contains('+searchText+')') 
        .addClass('faded'); 
       $('.faded:contains('+searchText+')') 
        .removeClass('faded'); 

       $('.faded').hide(); 
       $('.searchResult').show(); 

      } 
      else if (searchText.length == 0) { 
       $('.searchResult').removeClass('searchResult'); 
       $('.faded').removeClass('faded'); 
       $('td').show(); 
      } 
     }); 
}); 

JS Fiddle demo Updated

Answer 4

偉大な答えがあります。しかし、this男は私が本当に欲しかったことをやった。 http://blogs.digitss.com/demo/jquery-table-search.html

出典：それは、以前の回答

HTML

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/> 
<table id="my-table" border="1" style="border-collapse:collapse"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Sports</th> 
      <th>Country</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Sachin Tendulkar</td> 
      <td>Cricket</td> 
      <td>India</td> 
     </tr> 
     <tr> 
      <td>Tiger Woods</td> 
      <td>Golf</td> 
      <td>USA</td> 
     </tr> 
     <tr> 
      <td>Maria Sharapova</td> 
      <td>Tennis</td> 
      <td>Russia</td> 
     </tr> 
    </tbody> 
</table> 

のJavascript（jQueryの）

// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 
$(document).ready(function(){ 
    // Write on keyup event of keyword input element 
    $("#kwd_search").keyup(function(){ 
     // When value of the input is not blank 
     if($(this).val() != "") 
     { 
      // Show only matching TR, hide rest of them 
      $("#my-table tbody>tr").hide(); 
      $("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show(); 
     } 
     else 
     { 
      // When there is no input or clean again, show everything back 
      $("#my-table tbody>tr").show(); 
     } 
    }); 
}); 
// jQuery expression for case-insensitive filter 
$.extend($.expr[":"], 
{ 
    "contains-ci": function(elem, i, match, array) 
    { 
     return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

ライブデモからslighly違うhttp://blogs.digitss.com/javascript/jquery-javascript/implementing-quick-table-search-using-jquery-filter/