Comment puis-je filtrer dynamiquement une table ?

Un filtre est un programme capable de traiter un ensemble d'informations pour en extraire un sous-ensemble d'informations pertinentes.

Ici, par filtrer, on entend l'action d'afficher uniquement les cellules d'une colonne qui passent un test. Dynamiquement, car l'on doit recommencer le filtrage lorsque l'utilisateur change le critère ou la colonne de test. Pour un tableau comprenant plusieurs colonnes on affiche la ligne contenant la cellule qui passe le test. Le critère de test sera une expression rationnelle : RegExp (également dénommée "expression régulière" en traduction littérale)

Exemple

Nota bene : la méthode de @SpaceFrog pour construire un tableau est la plus rapide que je connaisse, mais le tableau comportant 12000 cellules, le temps d'affichage va de l'instantané à quelques instants en fonction de la puissance de votre navigateur et de votre ordinateur. La table contient six colonnes numérotées de 0 à 5.

Par défaut, on filtre les cellules de la troisième colonne. On affiche la ligne de la table pour laquelle la cellule de la troisième colonne contient le texte "Cellule 5" + au moins un chiffre après le 5.

Pour une vue détaillée de l'expression rationnelle "/^Cellule 5\d+/", voir : Regexper.

/*******************************************************
*              Speed Table By SpaceFrog                *
********************************************************/
function buildTable(destObj, nbrLines, nbrCells){			
	var baliseTable = document.createElement('table'),
		baliseTbody = document.createElement('tbody');
 
	baliseTable.id = "foo";
 
	for(var i = 0; i < nbrLines; i++){
		new addLine(baliseTbody, nbrLines, nbrCells, i);
	}
 
	baliseTable.appendChild(baliseTbody);
	destObj.appendChild(baliseTable);
	document.close();
}
 
function addLine(destBody, nbrLines, nbrCells, contenu){
	var newLine = document.createElement('tr');
 
	for(var l=0; l < nbrCells; l++){
		new addCells(newLine, contenu + '_' + l);
	}
	
	destBody.appendChild(newLine);
}
 
function addCells(destLine, contenu){
	var newCell = document.createElement('td');
 
	newCell.style.border = "solid 1px gray";
	newCell.appendChild(document.createTextNode('Cellule ' + contenu));
	destLine.appendChild(newCell);
}

/***********************************************************/
		
/*
 * On construit, très rapidement, une grande table de test d'ID "foo", 
 * en utilisant la fonction BuildTable de @SpaceFrog.
 *
 * Paramètres : élément du DOM, nb de lignes, nb de colonnes.
 */
buildTable( $( "#tableTest" )[ 0 ], 2000, 6 );
 
/*
 * On filtre une colonne avec l'expression rationnelle contenue dans 
 * l'input d'ID "filtre" : $("#filtre").val().
 * 
 * col : l'index de la colonne de 0 à n.
 */
function bar( col ){
	// construction de la RegExp
	var reg = new RegExp( $( "#filtre" ).val() );
 
	/*
	 * Pour chaque ligne du corps de la table d'ID "foo" on modifie la 
	 * propriété CSS display en fonction du résultat de la fonction match() 
	 * sur le texte de la cellule de la colonne de test.
	 */
	$( "#foo > tbody > tr" ).each( function( i, item ){
		$( item ).css( "display", ( 
			$( item ).children('td').eq( col ).text().match( reg ) ) ? 
			'' : 'none' );
	});
}
 
/*
 * On filtre la table chaque fois que l'utilisateur clique 
 * sur le bouton "Filtrer".
 */
$( "#btnTest" ).on( "click", function(){
	bar( $( "#col" ).val() );
	
	return false;
});