Comment faire de liste déroulante filtre pour une table à l'aide de jQuery?

Je veux faire la liste déroulante filtre de table dans des colonnes spécifiques, par exemple je veux faire un filtre pour le "Mariage" de la Colonne" & sélectionnez oui ou non dans la liste déroulante,c'est ma table:

J'ai besoin d'un code jquery pour m'aider à faire le filtre.

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Maried</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>yes</td>
    </tr>

    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>no</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>no</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>no</td>
    </tr>
  </tbody>
</table>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/filter.js"></script>

InformationsquelleAutor BBJ | 2016-03-03

Essayer ce - utilise une regex et jQuery fonction de filtre pour filtrer les résultats en fonction de la liste select onchange (à l'aide d'un ajout de la classe pour le tr est à l'écran de contrôle). Cela peut aussi être utilisé dans une saisie de texte version live filtrer toute les lignes de la table pour tout le contenu de sorte que vous pouvez taper les noms de peuples, etc et obtenir la fonction de filtre pour afficher uniquement les noms correspondants.

J'ai aussi mis un "tout" option pour afficher tous les tr de nouveau (dans les faits, removinmg le filtre). Notez qu'il cache simplement la non-correspondance des lignes, ce qui signifie que les rayures aspect de la table ne sera pas nécessairement écran comme vous le souhaitez, mais quand j'ai mis en place quelque chose comme ça - j'ai aussi ajouté une fonction de re-rayé de la table basée sur le nombre de lignes et pair /impair etc APRÈS l'application du filtre, afin de re-entrelacement de l'affichage de la table.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Filter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</head>
<body>
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Married
<select id='filterText' style='display:inline-block' onchange='filterText()'>
<option disabled selected>Select</option>
<option value='yes'>Yes</option>
<option value='no'>No</option>
<option value='all'>All</option>
</select>
</th>
</tr>
</thead>
<tbody  id="myTable">
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr class="content">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>yes</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>no</td>
</tr>
<tr class="content">
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>no</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
function filterText()
{  
var rex = new RegExp($('#filterText').val());
if(rex =="/all/"){clearFilter()}else{
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter()
{
$('.filterText').val('');
$('.content').show();
}
</script>
</body>
</html>

merci frère, c'est ce que je veux
où vous avez utilisé filtertext de la classe de clearFilter()
Que faire si je veux seleect si la cellule est vide?

InformationsquelleAutor gavgrif

Vous devez vous connecter pour publier un commentaire.