Table filtre colonne


<html><head>

<style type="text/css">
input {font-size:11px;width:5em}
th {background-color:gray}
</style>

<script type="text/javascript">
function freezeColWidth(tab){
// fixe/bloc la taille des colonnes du tableau à sa taille originale
// (évite les grandes variations de largeur si on trifouille dans le
// contenu du table, mais fonctionne pas vraiment si tableau plus grd que
// l'écran...)
  var ths=tab.getElementsByTagName("tr")[0].getElementsByTagName("th");
  for(var i=ths.length-1; i>=0; --i) {
    ths[i].style.width=ths[i].offsetWidth+"px";
  }
}

function filtrelignetable(inp){
// cache les lignes du tableau ne contenant pas le text de l'input.
// inp est l'input, il doit être dans le th en en-tete du tableau à traiter.
  var val=inp.value; // valeur à rechercher dans la colonne
  var th=inp.parentNode;
  var tr=th.parentNode;
  var tbody=tr.parentNode;
  var i, txt, th_;
  // recup numéro de la colonne à travailler :
  var ptCol=-1, colFound=false;
  for(i=0; i<tr.childNodes.length; ++i){
    th_ = tr.childNodes[i];
    if(th_.nodeName=="TH"){
      ++ptCol; if(th_==th){colFound=true;break;}
    }
  }
  if(!colFound){alert("filtrelignetable : numéro de colonne non trouvée");return;}
  var rexp = new RegExp(val, "i"); // text recherché
  // parcours les lignes du tableau :
  for(i=tbody.childNodes.length-1; i>0; --i){
    tr=tbody.childNodes[i];
    if(tr && tr.nodeName=="TR"){
      td=tr.childNodes[ptCol];
      if(td) {
        txt=td.innerHTML; // TODO : améliorer pour ne traiter que le texte
        tr.style.display=(txt.search(rexp)>-1?"":"none"); // cache ou pas
      }
    }
  }
}

function debug(aMsg) {
  setTimeout(function() { throw new Error("[debug] " + aMsg); }, 0);
}
</script>

</head>
<body onload="freezeColWidth(document.getElementById('tabData'))">
  <h1>filtre les lignes d'un tableau en javascript</h1>
  <h2>Cache les lignes ne contenant pas la valeur...</h2>
<table id="tabData" border="1">
<tr>
  <th>Nom<hr>filtre<input type="text" onkeyup="filtrelignetable(this)"></th>
  <th>Sexe<hr>filtre<input type="text" onkeyup="filtrelignetable(this)"></th>
  <th>Note<hr>filtre<input type="text" onkeyup="filtrelignetable(this)"></th>
</tr>
<tr><td>Julie abscefghijqlmnopqrstuvwxyz</td><td>F</td><td>18.5</td></tr>
<tr><td>Jacques</td><td>M</td><td>15</td></tr>
<tr><td>Pierrette</td><td>F</td><td>11.5</td></tr>
<tr><td>Luc</td><td>M</td><td>14</td></tr>
<tr><td>Jean</td><td>M</td><td>13</td></tr>
<tr><td>Cecile</td><td>F</td><td>11.5</td></tr>
<tr><td>Marc</td><td>M</td><td>11.5</td></tr>
<tr><td>Sophie</td><td>F</td><td>12.5</td></tr>
<tr><td>Pierre</td><td>F</td><td>17.5</td></tr>
<tr><td>Paul</td><td>M</td><td>16.5</td></tr>
</table>

TODO : faire fonctionner les filtres en combiné...
</body>