Valid XHTML     Valid CSS2    


        //   # (gH)   -_-  paysUE_tableau.js  ;  TimeStamp (unix) : 29 Décembre 2015 vers 22:45
        
        // initialisation des variables
        
        var dataset = [] ;
        var nomsCol = [] ;
        var aligne  = [] ;
        var nbc     = -1 ;
        var nbPays  = -1 ;
        
        // création du titre de niveau 2
        
        d3.select("#hautDePage")
          .append("h2").text("Tableau des populations et des superficies")
        
        // un peu de décalage ne fait pas de mal
        
        d3.select("#hautDePage")
          .append("blockquote")
          .attr("id","avantTabUE")
        
        // création du tableau...
        
        d3.select("#avantTabUE")
          .append("table")
          .attr("id","tabUE")
          .attr("border",1)
          .attr("cellpadding",15)
          .style("border-collapse","collapse")
        
        // de la partie entete
        
        d3.select("#tabUE")
          .append("thead")
          .append("tr")
          .attr("id","headerUE")
        
        // et du corps du tableau
        
        d3.select("#tabUE")
          .append("tbody")
          .attr("id","bodyTabUE")
        
        // chargement du fichier et remplissage du tableau
        // ligne par ligne
        
        d3.csv("paysUEjs.csv", function(error,data) {
        
          dataset = data;
          nbPays  = dataset.length ;
        
          // gestion des entetes de colonne
        
          d3.select("#headerUE")
            .append("th")
            .text("Numéro") ;
        
          (Object.keys(data[0])).forEach(function(nom) {
              nbc = nbc + 1 ;
              nomsCol[nbc] = nom ;
              if (nbc<=0) {
                aligne[nbc] = "left" ;
              } else {
                aligne[nbc] = "right" ;
              } ; // fin si
              d3.select("#headerUE")
                .append("th")
                .text(nom)
          }); // fin de pour chaque nom de colonne
        
          // remplissage du tableau
        
          for (numPays=0;numPays<dataset.length;numPays=numPays+1) {
        
             var pays = dataset[numPays] ;
        
             d3.select("#bodyTabUE")
               .append("tr")
               .attr("id","ligneInd"+numPays)
               .append("td")
               .text(numPays+1)
               .style("text-align","right") ;
        
             for (numCol=0;numCol<=nbc;numCol=numCol+1) {
                d3.select("#ligneInd"+numPays)
                  .append("td")
                  .text(pays[nomsCol[numCol]])
                  .style("text-align",aligne[numCol]) ;
             } ; // fin pour numCol
        
          } ; // fin pour numPays
        
        // pour finir, on rend les colonnes triables
        
        d3.select("#tabUE").attr("class","sortable")
        
        });

 

 

retour gH    Retour à la page principale de   (gH)