Discussion :

[charlene44]

bonjour tout le monde!

voila je n'y connais quasiment rien en javascript et on m'a demandé de faire une barre de défilement dans mon tableau au cas ou il serait trop grand, apparemment c'est faisable en javascript mais je vois pas du tout comment faire.

j'ai une fonction qui créé une ligne de tableau à chaque nouvelle ligne dans ma bdd (script php evidemment) et je voudrai que si il y a plus de 5 lignes dans le tableau on affiche une barre de defilement verticale, autrement on affiche rien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
function construire_tableau($login)
  {
    // on selectionne les informations relatives à tous les fichiers présents dans la base pour un utilisateur donné
    $req = mysql_query(r_donne_caracteristiques_fichier($login)) or die ('erreur lors de l\'exécution de la requête, veuillez réessayer');
 
	// tant qu'il y a des lignes retournées par la requête, on ajoute une ligne pour chaque fichier
	while($row = mysql_fetch_row($req)) 
		{
		  $code_doc = $row[0];
		  $chemin = $row[1];
		  $chemin = substr($row[1],7);
		  $heure_der_modif = substr($row[2],10,10);
		  $jour = substr($row[2],8,2);
		  $mois = substr($row[2],5,2);
		  $annee = substr($row[2],0,4);
		  $date_der_modif = "$jour-$mois-$annee";
		  $lib_document = trouver_nom_fichier($chemin);
 
		  echo '<tr>
		          <td class="ligne_tableau_fichier">'.$lib_document.'</td>
				  <td class="ligne_tableau_fichier">'.$chemin.'</td>
				  <td class="ligne_tableau_fichier">Le <u>'.$date_der_modif.'</u> à '.$heure_der_modif.'</td>
				  <td class="ligne_tableau_fichier">
				    <form action="action_ouverture_fichier.php" method="get">
 
					     <input type="hidden" value='.$code_doc.' name="code" />
                         <input type="submit" value="Ouvrir" name="ouvrir" />
 
                    </form>
				  </td>
				</tr>';
	    };
  };

et voici mon code HTML dans ma page, j'ai essayé avec un div overflow mais ca marche pas, et surtout c'est très moche!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<table class="tableau_fichier" align="center">
	    <tr>
		  <th class="en_tete_tableau">
 
		    Libellé du document
 
	      </th>
		  <th class="en_tete_tableau">
 
		    Emplacement du document
 
		  </th>
		  <th class="en_tete_tableau">
 
		    Date de dernière modification
 
		  </th>
		  <th class="en_tete_tableau">
 
		    Ouverture du document
 
	      </th>
		  </tr>
 
 
		  <?php construire_tableau($login) ?>
 
 
      </table>
 
	  </td>   
    </tr>

toute idée est la bienvenue, merci d'avance!

[gorgonite]

euh si tu fixes la hauteur de la case... elle ne va pas apparaitre toute seule comme avec les object, les frame, etc ???

[supermanu]

Après echo '<tr>
tu peux mettre une balise DIV
<div style="height:30px;">
...
</div>
Tu auras une scrollbar si la hauteru du tableau dépasse 30px.

[charlene44]

ca ne marche pas supermanu, ca me fou ma présentation de tableau en l'air, et je n'ai aucune barre de defilement. mais je voudrai pas une hauteur type en fait je voudrai que ca compte les lignes du tableau (les td pas les th) et si ca dépasse 5, hop une barre de defilement

[supermanu]

En fait tu n'as pas besoins de javascript. Le css suffit
Regarde le lien suivant : http://www.cssplay.co.uk/menu/tablescroll.html

Et regarde le code source. Si tu n'y arrive pas, demande, on trouvera une solutoin

[charlene44]

c'est un peu mieux mais j'ai un autre problème maintenant, mais cellules d'en tete ne sont pas liées à mes cellules td, apparemment j'ai lu sur le net que c'est avec scope qu'il faut faire ca, je l'ai fait mais ca ne marche pas, je vous envoi une capture d'ecran ainsi que mon code :

code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
.tableau_fichier
{
border : 1px solid blue;
text-align : center;
}
 
.th1
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 50px;
}
 
.th2
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 100px;
}
 
.th3
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 50px;
}
 
.th4
{
background-color : #87CEFA;
text-align : center;
padding-top : 8px;
padding-left : 8px;
padding-right : 8px;
padding-bottom : 8px;
border-right : 1px solid #A9A9A9;
border-bottom : 1px solid #A9A9A9;
width : 50px;
}
 
.td1
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 50px;
}
 
.td2
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 100px;
}
 
.td3
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 50px;
}
 
.td4
{
border-bottom : 1px solid #A9A9A9;
border-right : 1px solid #A9A9A9;
width : 50px
}
 
.div_tableau
{
height : 10em;
overflow : auto;
}

code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
      <td class="align_centre" colspan="2">
 
<br />
<br />
<br />
<br />
 
      <table class="tableau_fichier" align="center">
	    <thead>
	    <tr>
		  <th class="th1" scope="col">
 
		    Libellé du document
 
	      </th>
		  <th class="th2" scope="col">
 
		    Emplacement du document
 
		  </th>
		  <th class="th3" scope="col">
 
		    Date de dernière modification
 
		  </th>
		  <th class="th4" scope="col">
 
		    Ouverture du document
 
	      </th>
		  </tr>
		</thead>
 
		<tbody>
		<tr><td colspan="4">
 
		<div class="div_tableau">
 
          <table>
 
 
		  <?php construire_tableau($login) ?>
 
 
        </table>
 
        </div>
 
	  </td>   
    </tr>
 
	</tbody>
 
	</table>
 
	  </td>
	</tr>

code PHP :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
  /*----------------- Fonction construire_tableau()------------------------*/
 
  function construire_tableau($login)
  {
    // on selectionne les informations relatives à tous les fichiers présents dans la base pour un utilisateur donné
    $req = mysql_query(r_donne_caracteristiques_fichier($login)) or die ('erreur lors de l\'exécution de la requête, veuillez réessayer');
 
	// tant qu'il y a des lignes retournées par la requête, on ajoute une ligne pour chaque fichier
	while($row = mysql_fetch_row($req)) 
		{
		  $code_doc = $row[0];
		  $chemin = $row[1];
		  $chemin = substr($row[1],7);
		  $heure_der_modif = substr($row[2],10,10);
		  $jour = substr($row[2],8,2);
		  $mois = substr($row[2],5,2);
		  $annee = substr($row[2],0,4);
		  $date_der_modif = "$jour-$mois-$annee";
		  $lib_document = trouver_nom_fichier($chemin);
 
		  echo '<tr>
		          <td class="td1">'.$lib_document.'</td>
				  <td class="td2">'.$chemin.'</td>
				  <td class="td3">Le <u>'.$date_der_modif.'</u> à '.$heure_der_modif.'</td>
				  <td class="td4">
				    <form action="action_ouverture_fichier.php" method="get">
 
					     <input type="hidden" value='.$code_doc.' name="code" />
                         <input type="submit" value="Ouvrir" name="ouvrir" />
 
                    </form>
				  </td>
				</tr>';
	    };
  };

capture d'écran : résultat

merci d'avance

ps : désolé pour le hs, je sais qu'on est dans la partie javascript et que je parle de css...