Filtrage des lignes de la table jQuery par colonne

Question

J'essaie de filtrer les lignes de table de manière intelligente (par opposition à des tonnes de code qui finissent par faire le travail) mais d'une inspiration plutôt sèche.

J'ai 5 colonnes dans ma table. En haut de chacun, il y a une liste déroulante ou une zone de texte avec laquelle l'utilisateur peut filtrer les données de la table (masquer les lignes qui ne s'appliquent pas)

Il y a beaucoup de plugins de filtrage de table pour jQuery mais aucun qui fonctionne tout à fait comme ça, et c'est la partie compliquée: |

Answer 1

Voici un exemple de filtre de base http://jsfiddle.net/urf6P/3/

Il utilise le sélecteur jquery: contient (« texte ») et: not (: contains ('some text')) pour décider si chaque ligne doit être affichée ou cachée. Cela pourrait vous aller dans une direction.

modifié pour inclure le code HTML et JavaScript à partir de la jsFiddle:

$(function() {  
    $('#filter1').change(function() { 
     $("#table td.col1:contains('" + $(this).val() + "')").parent().show(); 
     $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide(); 
    }); 

}); 

Answer 2

Cela peut ne pas être la meilleure façon de le faire, et je ne suis pas sûr de la performance, mais une option serait de marquer chaque colonne (dans chaque rangée) avec un id commençant par un identifiant de colonne, puis un numéro unique comme un identifiant d'enregistrement.

Par exemple, si vous aviez une colonne produit Nom, et l'ID de l'enregistrement 763, je ferais quelque chose comme ce qui suit:

​​<table id="table1"> 
    <thead> 
     <tr> 
      <th>Artist</th> 
      <th>Album</th> 
      <th>Genre</th> 
      <th>Price</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td id="artist-127">Red Hot Chili Peppers</td> 
      <td id="album-195">Californication</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-195">$8.99</td> 
     </tr> 
     <tr> 
      <td id="artist-59">Santana</td> 
      <td id="album-198">Santana Live</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-198">$8.99</td> 
     </tr> 
     <tr> 
      <td id="artist-120">Pink Floyd</td> 
      <td id="album-183">Dark Side Of The Moon</td> 
      <td id="genre-1">Rock</td> 
      <td id="price-183">$8.99</td> 
     </tr> 
    </tbody> 
</table> 

Vous pouvez ensuite utiliser jQuery pour filtre basé sur le début de la .

Par exemple, si vous voulez filtrer par la colonne de l'artiste:

var regex = /Hot/; 
$('#table1').find('tbody').find('[id^=artist]').each(function() { 
    if (!regex.test(this.innerHTML)) { 
     this.parentNode.style.backgroundColor = '#ff0000'; 
    } 
}); 

Answer 3

étape: 1 écrire le texte suivant dans le fichier .html

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> 

<table id="myTable"> 
    <tr class="header"> 
    <th style="width:60%;">Name</th> 
    <th style="width:40%;">Country</th> 
    </tr> 
    <tr> 
    <td>Alfreds Futterkiste</td> 
    <td>Germany</td> 
    </tr> 
    <tr> 
    <td>Berglunds snabbkop</td> 
    <td>Sweden</td> 
    </tr> 
    <tr> 
    <td>Island Trading</td> 
    <td>UK</td> 
    </tr> 
    <tr> 
    <td>Koniglich Essen</td> 
    <td>Germany</td> 
    </tr> 
</table> 

étape: 2 écrire le texte suivant dans fichier .js

function myFunction() { 
    // Declare variables 
    var input, filter, table, tr, td, i; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 

    // Loop through all table rows, and hide those who don't match the search query 
    for (i = 0; i < tr.length; i++) { 
    td = tr[i].getElementsByTagName("td")[0]; 
    if (td) { 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
     } else { 
     tr[i].style.display = "none"; 
     } 
    } 
    } 
}