Faire défiler les colonnes d'une Table HTML

Téléchargement

Compatibilité

		
 
<script type='text/javascript'>
 
   var nbCols = 10;
   var startPos = 0;
   var maxCols = 0;
 
   function decoupeTable(idtable){
      var tble = document.getElementById(idtable);
      var nav  = document.createElement("div");
      var tb   = tble.getElementsByTagName("tbody")[0];
      var lig    = tble.getElementsByTagName("tr");
      var next = document.createElement("input");
      var prev = document.createElement("input");
 
      next.type = "button";
      next.value = ">";
      next.onclick = function(){
         if(startPos+nbCols != maxCols){
            for(var i=0;i<lig.length;i++){
               lig[i].childNodes[startPos].style.display = "none";
               lig[i].childNodes[startPos+nbCols].style.display = "";
            }
            startPos++;
         }
      }
      prev.type = "button";
      prev.value = "<";
      prev.onclick = function(){
         if(startPos != 0){
            startPos--;
            for(var i=0;i<lig.length;i++){
               lig[i].childNodes[startPos].style.display = "";
               lig[i].childNodes[startPos+nbCols].style.display = "none";
            }
         }
      }
 
      nav.appendChild(prev);
      nav.appendChild(next);
      tble.parentNode.insertBefore(nav,tble);
 
      maxCols = lig[0].childNodes.length;
 
      for(var i=0;i<lig.length;i++){
         var cells = lig[i].childNodes;
         for(var j=nbCols;j<maxCols;j++){
            cells[j].style.display = "none";
         }
      }
   }
 
   window.onload = function(){
      decoupeTable('matable');
   }
</script>
 
<div id='stpos'></div>
<?
   echo "<table id='matable' border='1'>
         <tbody>";
   for($i=0;$i<5;$i++){
      echo "<tr>";
      for($j=0;$j<50;$j++)
         echo "<td>",$i," ",$j,"</td>";
      echo "</tr>";
   }
   echo "</tbody>
      </table>";
?>
 
	

 Poster une réponse

Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.