Recherche HTML Table

Question

J'ai créé un tableau HTML et je souhaite intégrer un champ de recherche. Comment je fais ça? Pouvez-vous recommander un bon plugin jQuery ou mieux un tutoriel complet?

Answer 1

tables de recherche est simple:

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

Answer 2

Une approche rapide et sale, en utilisant jQuery:

$(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'); 
       } 
      }); 
    }); 

avec ce qui suit (x) html:

<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.

---

Sous la direction utiliser addClass()/removeClass(), à la place de la mise en css dans le jQuery lui-même:

$(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.

---

Pour se fanent les cellules de table qui ne contiennent pas le résultat de la recherche, vous pouvez utiliser les éléments suivants:

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

Merci David Thomas

Bonne solution. Ce qui suit le rend parfait.

$(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

Il y a de grandes réponses. Mais this gars a fait ce que je voulais vraiment. il est différent des réponses slighly précédentes

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; 
    } 
}); 

de démonstration en direct: http://blogs.digitss.com/demo/jquery-table-search.html

Source: http://blogs.digitss.com/javascript/jquery-javascript/implementing-quick-table-search-using-jquery-filter/