[Résolu] Afficher dans un Compteur Graphique, le Nb de lignes d'un ta

Question

6troen

10 Jun 2012 à 00:09

bonjour,

Je voudrais afficher un Compteur du nombre de lignes totales d'un tableau HTML et afficher aussi sur un second Compteur, le nombre de cellules d'une colonne de ce tableau, qui correspondent à une chaîne de caractères définies (par ex : "Off" (sans les "", mais en gérant la casse)

Je ne sais absolument pas par quel bout prendre le problème !

Toute aide sera très appréciée ....
Modifié par 6troen (18 Jun 2012 - 19:31)

kodakgold

10 Jun 2012 à 08:56

Bonjour,

Tu peux passer par du JS pour avoir cela :

document.getElementById("matableID").getElementsByTagName("TR").length;

ou bien

document.getElementById("matableID").rows.length

@+

Sam

6troen

10 Jun 2012 à 14:19

Merci kodakgold,

J'ai déjà ces "bouts" de code .....
Mais je suis bien incapable de les mettre dans une structure Smiley confused

Est-ce dans <script></script>, dans la section <head> ou <body>,
Où est-ce que je fais ressortir le résultat pour qu'il soit affiché ...faut il sortir dans un <div> ?

D'autant que je désirerais que cette valeur soit vue sous une forme "compteur" et non dans une zone de texte . Smiley rolleyes

merci de continuer de me diriger vers une solution . Smiley smile

Voilà l'objet du problème :
http://gerard.marin.free.fr/RSRBR/musique/Tests-ClipsMusicaux.htm
(c'est la version de tests, la version en cours est sans "Tests", sur le même site.

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clips Vidéos & Musicaux sur Rallyesim.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

<!--Couleur des liens----
a.type1 { color:#0000CC; }
a.type1:hover { color:#FF0000;}
a.type1:visited { color:#009900;}
-->

.conteneur-clips {
	position: fixed;
	height: 850px;
	width: 1024px;
	top:0px;
	left: 0px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../../images/dobro3.jpg);
}


.Style30 {font-family: "Comic Sans MS", cursive; color: #990000;}
.Style31 {font-size: 12px}
.Style33 {font-family: "Comic Sans MS"; font-weight: bold;}
  #conteneur-clips #Layer4 div .Style34 .Style33 a {
	font-family: Comic Sans MS, cursive;
}
.Style35 {font-size: 14px}
.tabnormal{background-color:}
.tabover{background-color:#FFFFCC;}

a:link {
	color: #000099;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #990066;
}
a:hover {
	text-decoration: underline;
	color: #CC0000;
}
a:active {
	text-decoration: none;
	color: #006600;
}
	
body {
	background-color: #000015;
}
.font522018 {color:blue;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;}
.font622018 {color:blue;
	font-size:8.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;}
.font722018 {color:blue;
	font-size:8.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;}
.font822018 {color:blue;
	font-size:10.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;}
	
.NbClipsView {padding:0px;
	mso-ignore:padding;
	color:#3366CC;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:general;
	vertical-align:bottom;
	border-top:none;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
	
.Artiste {padding:0px;
	mso-ignore:padding;
	color:#3366CC;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:general;
	vertical-align:bottom;
	border-top:.5pt solid windowtext;
	border-right:.5pt solid windowtext;
	border-bottom:.5pt solid windowtext;
	border-left:1.0pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:normal;}

.Titre {padding:0px;
	mso-ignore:padding;
	color:blue;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:general;
	vertical-align:bottom;
	border-top:none;
	border-right:.5pt solid windowtext;
	border-bottom:.5pt solid windowtext;
	border-left:.5pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:normal;}	
		
.Posteur {padding:0px;
	mso-ignore:padding;
	color:#3366CC;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:general;
	vertical-align:bottom;
	border-top:none;
	border-right:.5pt solid windowtext;
	border-bottom:.5pt solid windowtext;
	border-left:.5pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
		
.Date {padding:0px;
	mso-ignore:padding;
	color:#4F81BD;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"General Date";
	text-align:center;
	vertical-align:bottom;
	border-top:none;
	border-right:1.0pt solid windowtext;
	border-bottom:.5pt solid windowtext;
	border-left:1.0pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
		
.Video {padding:0px;
	mso-ignore:padding;
	color:#3366CC;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:center;
	vertical-align:bottom;
	border-top:none;
	border-right:.5pt solid windowtext;
	border-bottom:.5pt solid windowtext;
	border-left:.5pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
		
.Audio
	{padding:0px;
	mso-ignore:padding;
	color:#FF00CC;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:center;
	vertical-align:bottom;
	border:.5pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
		
.Image
	{padding:0px;
	mso-ignore:padding;
	color:#009900;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:center;
	vertical-align:bottom;
	border:.5pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}
	
.Off
	{padding:0px;
	mso-ignore:padding;
	color:red;
	font-size:10.0pt;
	font-weight:700;
	font-style:normal;
	text-decoration:none;
	font-family:"Comic Sans MS", cursive;
	mso-font-charset:0;
	mso-number-format:"\@";
	text-align:center;
	vertical-align:bottom;
	border:.5pt solid windowtext;
	mso-background-source:auto;
	mso-pattern:auto;
	white-space:nowrap;}	
	

</style>





<!-- DEBUT DU SCRIPT HORLOGE-->
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
 http://www.editeurjavascript.com
 
*/
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgSrc = new Array;
imgSrc[0] = 'images/h0.gif';
imgSrc[1] = 'images/h1.gif';
imgSrc[2] = 'images/h2.gif';
imgSrc[3] = 'images/h3.gif';
imgSrc[4] = 'images/h4.gif';
imgSrc[5] = 'images/h5.gif';
imgSrc[6] = 'images/h6.gif';
imgSrc[7] = 'images/h7.gif';
imgSrc[8] = 'images/h8.gif';
imgSrc[9] = 'images/h9.gif';
i0.src = imgSrc[0];
i1.src = imgSrc[1];
i2.src = imgSrc[2];
i3.src = imgSrc[3];
i4.src = imgSrc[4];
i5.src = imgSrc[5];
i6.src = imgSrc[6];
i7.src = imgSrc[7];
i8.src = imgSrc[8];
i9.src = imgSrc[9];
function HeureCheck()
	{
	krucial = new Date;
	
	// HEURE
	heure = krucial.getHours();
	min = krucial.getMinutes();
	sec = krucial.getSeconds();
	
	// DATE
	jour = krucial.getDate();
	mois = krucial.getMonth()+1;
	annee = krucial.getFullYear();
	
	// HEURE
	if (sec < 10)
		sec = "0"+sec;
	if (min < 10)
		min = "0"+min;
	if (heure < 10)
		heure = "0"+heure;
	
	// DATE
	if (mois < 10)
		mois = "0"+mois;
	if (jour < 10)
		jour = "0"+jour;
		
// DATE
DinaDate = "" + jour +  mois + annee;

// HEURE
DinaHeure = ""+ heure + min + sec;

	for(a=0;a<8;a++)
		{
		// DATE
		obj_image = eval("document.date_img"+(a+1));
		ejs_char = DinaDate.charAt(a);
		obj_image.src = imgSrc[ejs_char];
		}
		
	for(a=0;a<6;a++)
		{
		// HEURE
		obj_image = eval("document.heure_img"+(a+1));
		ejs_char = DinaHeure.charAt(a);
		obj_image.src = imgSrc[ejs_char];
		}

	tempo = setTimeout("HeureCheck()", 1000)
	}
window.onload = HeureCheck;
</SCRIPT>
<!-- FIN DU SCRIPT HORLOGE-->


<script type="text/javascript" src="tablesort.js">
</script>
<script type="text/javascript" src="customsort.js">
</script>

<link href="tablesort.css"       rel="stylesheet" type="text/css" />

<script type="text/JavaScript">
<!--


function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
//-->
</script>

<script type="text/javascript">
 	<!--
  function count()
  {
   this.resultat.value = this.texte.value.length;
  }
 	-->

 </script>




<style type="text/css">
<!--
.Style36 {
	color: #CC0000;
	font-weight: bold;
}
-->
</style>
</head>


<!--
<body onload="MM_popupMsg('Cette liste peut pointer sur des clips qui ne sont plus valides, ou dont l\'int&eacute;gration est d&eacute;sactiv&eacute;e sur demande.   Ce sont \&quot;vos\&quot; clips...,  vous pouvez les modifier, ou les supprimer.  Dans ce cas, avertissez moi par MP sur le Forum Rallyesim.fr, en pr&eacute;cisant le N&deg; de page, l\'artiste et le titre.  \r\r       Les clips non valides &agrave; la mise en page de la liste, ou faisant \&quot;doublon\&quot;,  ne seront pas inclus dans cette liste.\r\r       Merci de votre compr&eacute;hension.       OuRaL');HeureCheck()">
-->


<div id="conteneur-clips" style="position:relative; left:0px; top:0px; width:1024px; height:850px; z-index:1; visibility: visible;" class="conteneur-clips">


 <div id="entete-clips" style="position:absolute; left:185px; top:7px; width:810px; height:22px; z-index:4">
    <table width="810" border="1">
      <tr>
        <th width="220" bgcolor="#CCFFCC" scope="col"><span class="Style30">ARTISTE / GROUPE</span></th>
        <th width="270" bgcolor="#CCFFCC" scope="col"><span class="Style30">TITRE</span></th>
        <th width="60" bgcolor="#CCFFCC" scope="col"><span class="Style30">Media</span></th>
        <th width="85" bgcolor="#CCFFCC" scope="col"><span class="Style30">Posteur</span></th>
		<th width="140" bgcolor="#CCFFCC" scope="col"><span class="Style30">Date</span></th>
      </tr>
    </table>
</div>
  
  
  <div id="datas-clips" style="position:absolute; left:185px; top:40px; width:810px; height:798px; z-index:1; overflow: scroll; color: #026B7D; font-weight: bold;">

  <table width="790" border="0" cellpadding="0" cellspacing="0" id="TableClips">

 
     <thead>
      <tr>
        <th class="sortable-text"><div align="center" class="Style30">&#8597;</div></th>
        <th class="sortable-text"><div align="center" class="Style30">&#8597;</div></th>
        <th class="sortable-text"><div align="center" class="Style30">&#8597;</div></th>
        <th class="sortable-text"><div align="center" class="Style30">&#8597;</div></th>
		<th class="sortable-sortEnglishDateTime"><div align="center" class="Style30">&#8597;</div></th>
      </tr>
    </thead>
    <tbody>
	

    <tr class="tabnormal" onMouseOver="this.className='tabover'" onMouseOut="this.className='tabnormal'" height="22" style='height:16.5pt'>
      <td height="22" class="Artiste"  width="305" style='height:16.5pt;border-top:none;
  width:182pt'>NEIMA</td>
      <td class="Titre" width="290" style='border-top:none;border-left:none;
  width:227pt'><a
  href="http://forum.rallyesim.fr/viewtopic.php?p=366021#p366021" class="type1" target="_blank">Mental </a></td>
      <td class="Video" width="68" style='border-top:none;border-left:none'>Video</td>
      <td class="Posteur" style='border-top:none;border-left:none'>Oural</td>
      <td class="Date" style='border-top:none'>07/06/2012 03:54</td>
    </tr>


	</tbody>
  </table>
  </div>
  
  
<div id="Logo" style="position:absolute; left:27px; top:-1px; width:130px; height:115px; z-index:3">
    <p align="center"><img src="../../images/oural.gif" width="119" height="14" /><a href="../../index.htm" class="type1" target="_blank"><img src="../../images/GifsAnimes/avatar_GicuraForumProd.gif" width="120" height="100" border="0" /></a></p>
</div>

	  	<div class="Style30" id="Layer" style="position:absolute; left:32px; top:270px; width:120px; height:22px; z-index:8; background-color: #FFFF66; layer-background-color: #FFFF66; border: 1px none #000000;">
	  	  <div align="center">Mise &agrave; jour le </div>
  </div>
	
	<div class="Style30" id="Layer" style="position:absolute; left:32px; top:291px; width:120px; height:44px; z-index:8; background-color: #FFFF66; layer-background-color: #FFFF66; border: 1px none #000000;">
	  <div align="center"><!-- #BeginDate format:Ge1m -->10.06.2012  14:32<!-- #EndDate --> --></div>
  </div>
	


	
  	<a href="http://forum.rallyesim.fr/viewtopic.php?f=29&amp;t=1756&amp;view=last" class="type1" target="_blank"> </a>
<div id="Layer1" style="position:absolute; left:27px; top:120px; width:130px; height:98px; z-index:2">
      <div align="center"><a href="http://forum.rallyesim.fr/viewtopic.php?f=29&t=1756&view=last" class="type1" target="_blank">
      <img src="../../images/porteemusicale2.jpg" width="122" height="150" border="0" />	</a> </div>
  </div>
	
	<div id="Layer2" style="position:absolute; left:18px; top:769px; width:147px; height:68px; z-index:2">
	<a href="http://xi.rallyesim.com/accueil.asp" class="type1" target="_blank">
	<img src="../../images/StickRallyesim.jpg" width="147" height="68" border="0" />	</a>	</div>
	
	<div id="layer" style="position:absolute; left:20px; top:670px; width:110px; height:95px; z-index:2"> 
      <div align="center" class="Style32"><a href="http://forum.rallyesim.fr/viewtopic.php?p=22122#p22122" class="type1" target="_blank">
        <div align="left">
          <p class="Style33 Style35 Style31"><blink>A suivre<br /> 
          pour bien 
              <br />
          poster sur ce Forum </blink></p>
      </div>
        </a> <p></p>
      </div>
  </div>
	
	<div id="layer3" style="position:absolute; left:27px; top:230px; width:130px; height:45px; z-index:2">
      <div align="center" class="Style33"><strong><blink><span class="Style39"><a href="http://forum.rallyesim.fr/posting.php?mode=reply&amp;f=29&amp;t=1756" class="type1" target="_blank">Ins&eacute;rer un clip</a></span></blink></strong></div></div>
	  
<!-----Horloge----	 
--> 
	  	<div id="horloge" style="position:absolute; left:30px; top:340px; width:125px; height:1px; z-index:2">
<TABLE BORDER=1 align="center" CELLPADDING=0 CELLSPACING=0>
  <TR><TD><IMG SRC="images/h0.gif" NAME="date_img1" /><IMG SRC="images/h0.gif" NAME="date_img2" width="12" height="15" /><IMG SRC="images/hs.gif" /><IMG SRC="images/h0.gif" NAME="date_img3" /><IMG SRC="images/h0.gif" NAME="date_img4" /><IMG SRC="images/hs.gif" /><IMG SRC="images/h2.gif" NAME="date_img5" /><IMG SRC="images/h0.gif" NAME="date_img6" /><IMG SRC="images/h0.gif" NAME="date_img7" /><IMG SRC="images/h0.gif" NAME="date_img8" /></TD>
</TR></TABLE>
<TABLE BORDER=1 align="center" CELLPADDING=0 CELLSPACING=0>
  <TR><TD><IMG SRC="images/h0.gif" NAME="heure_img1" /><IMG SRC="images/h0.gif" NAME="heure_img2" /><IMG SRC="images/hh.gif" /><IMG SRC="images/h0.gif" NAME="heure_img3" /><IMG SRC="images/h0.gif" NAME="heure_img4" /><IMG SRC="images/hm.gif" /><IMG SRC="images/h0.gif" NAME="heure_img5" /><IMG SRC="images/h0.gif" NAME="heure_img6" /></TD></TR></TABLE>

</div>
<!--
-------Fin Horloge-->


<!-------Debut CompteLignes
-->
	<div id="CompteLignes" style="position:absolute; left:30px; top:400px; width:110px; height:45px; z-index:2">
	      <div align="center"><span class="NbClipsView">Nb de Clips Total"</span> 
		   <TABLE BORDER=1 align="center" CELLPADDING=0 CELLSPACING=0>
  		  <TR><TD><IMG SRC="images/h0.gif" NAME="chiffre_img1" /><IMG SRC="images/h0.gif" NAME="chiffre_img2" /><IMG SRC="images/h0.gif" 		NAME="chiffre_img3" /><IMG SRC="images/h0.gif" NAME="chiffre_img4" /></TD></TR></TABLE>		  
		 </div>
  </div>
		
		<!-------Debut NbClipsOff
-->
		<div id="NbClipsOff" style="position:absolute; left:30px; top:480px; width:110px; height:45px; z-index:2">
	      <div align="center"><span class="NbClipsView">Nb de Clips"<span class="Style36">Off</span>"</span> 
		   <TABLE BORDER=1 align="center" CELLPADDING=0 CELLSPACING=0>
  		  <TR><TD><IMG SRC="images/h0.gif" NAME="chiffre_img1" /><IMG SRC="images/h0.gif" NAME="chiffre_img2" /><IMG SRC="images/h0.gif" 		NAME="chiffre_img3" /><IMG SRC="images/h0.gif" NAME="chiffre_img4" /></TD></TR></TABLE>		  
		 </div>
  </div>
	  
</div>
</div>

</body>
<!--
<body onUnload="window.alert('Merci et à bientôt sur ***LA MUSIQUE QUE VOUS ECOUTEZ***')"></body>
-->
</html>

Modifié par 6troen (10 Jun 2012 - 14:41)

BlueScreenJunky

10 Jun 2012 à 18:46

Il vaut mieux appeler ton script après que le tableau ait été affiché, pour compter les lignes ce sera plus pratique Smiley cligne

Donc par exemple juste avant la fermeture de body :


<script>
	var nombre_lignes = document.getElementById("TableClips").getElementsByTagName("tr").length;
	document.getElementById("CompteLignes").innerHTML = nombre_lignes;		
</script>

Après si tu veux afficher sous forme de compteur tu peux décomposer la variable nombre_lignes en un tableau qui contient chaque chiffre en faisant
tableau_compteur = nombre_lignes.split('');
et tu n'as plus qu'à parcourir tableau_compteur[] et afficher l'image qui correspond au chiffre à chaque fois.
Cela dit je ne cautionne pas vraiment l'idée du compteur fait en tableau qui contient des images, il y a surement plus élégant à faire.

PS : Si tu as l'occasion essayes de retravailler ton CSS, il y a un nombre de répétitions inutiles assez hallucinant.

Bonne continuation !

6troen

10 Jun 2012 à 19:21

Merci BlueScreenJunky,

Merci pour ton aide sur mon cas ! Smiley smile

Je vais essayer d'adapter le résultat en compteur ... Smiley rolleyes

Pour le CSS, je ne vois pas de "répétitions inutiles", peux-tu m'en pointer une ou deux ? Smiley decu

Merci .

~~supprimé~~

10 Jun 2012 à 19:32

Première fois que je vois le préfixe mso dans une CSS destinée au Web. T'es au courant que c'est le préfixe pour les applications Microsoft Office ?

BlueScreenJunky

10 Jun 2012 à 19:42

Par exemple pour tes classes .Titre .Artiste .Video .Posteur .Date tu as beaucoup de propriétés identiques qui pourraient être déclarées une seule fois pour les éléments td de ton tableau.
D'ailleurs pour ça tu dois pouvoir jouer avec des balises col pour ne pas remettre la classe à chaque cellule.

Pareil pour les classes .font522018 .font622018 .font722018. j'ai pas trop regardé à quoi ça correspond mais si c'est pour mettre du texte en valeur par exemple pourquoi ne pas appliquer la couleur, police, decoration etc. qui sont identiques à un élément comme <em> ou <strong> et ajouter juste une classe pour faire varier la taille ?

En fait, je pense que tu n'as pas encore bien compris l'intérêt du "Cascading" des CSS (le fait que si tu applique une propriété sur un élément parent elle s'appliquera aussi à tous ses descendants).

6troen

10 Jun 2012 à 19:50

bonjour jb_gfx ,

Je t"explique le pourquoi, petit curieux ..... Smiley ravi

Cette page HTML est destinée à compléter un manque sur le forum que je fréquente en tant que pilote de rallye "virtuel" (Rallyesim.fr, championnats de rallyes automobiles en ligne).

Nous y avons un sous-forum dans lequel les membres viennent y exposer leurs goûts musicaux :
http://forum.rallyesim.fr/viewtopic.php?f=29&t=1756&start=1020[/url

Il y a donc beaucoup de clips divers (Youtube, Dailymotion et autres) qui sont intégrés dans les posts mis en ligne, mais il n'y a pas de Liste récapitulative de mise à disposition, l'administrateur du site ne voulant pas se surcharger avec ce genre de soucis !
Donc, sur mon site perso, j'ai créé cette page .

Je relève tous les jours les nouveaux clips, et je les ajoute à la liste, directement avec mon éditeur de code Dreamweaver .
Mais à l'origine, quand je suis arrivé sur le forum de la musique, il y avait déjà 300 ou 400 clips.... donc, là partir de zéro .

Je suis allé à ce que je connais : tableau Excel ! Smiley ravi

Du tableau Excel, j'ai exporté en html, et j'ai intégré dans Dreamweaver .

J'ai déjà bien dégrossi les classes qui étaient toutes en "xl******", et j'ai simplifié en fonction de ce que j'avais besoin, mais c'est sûr, je suis débutant et reste bien débutant.

Pour moi, (retraité de l'informatique, 68 ans Smiley lol

) c'est déjà une victoire de faire fonctionner mon site.

Je me doute qu'il est loin d'être parfait, et je ne cherche qu'à l'améliorer, mais en y mettant le temps ! Smiley biggol

~~supprimé~~

11 Jun 2012 à 07:52

salut, voici un exemple de manipulation de tables en javascript.
J'espère que cela va te convenir !

<!doctype html>
<html>
<head>
<title>Nombres d'occurrences dans un tableau</title>
<style type="text/css">
table,
table tr td {
	border : 1px solid red;
}

table tr td {
	width : 30px;
	text-align : center;
}
</style>

<script type="text/javascript">
window.onload = function () {
var NbNon = 0, NbOn =0;

var liste = document.getElementById("matable").rows;

for (var i=0; i<liste.length; i++)
{
	if (liste[ i ].cells[ 0 ].innerHTML == "non") NbNon++;
	if (liste[ i ].cells[ 2 ].innerHTML == "on")  NbOn++;
}

document.getElementById("nblignes").innerHTML = liste.length;
document.getElementById("nbnon").innerHTML = NbNon;
document.getElementById("nbon").innerHTML = NbOn;

}
</script>
</head>

<body>
	<table id="matable">
		<tr><td>oui</td><td>&nbsp;</td><td>off</td></tr>
		<tr><td>oui</td><td>&nbsp;</td><td>on</td></tr>
		<tr><td>non</td><td>&nbsp;</td><td>off</td></tr>
		<tr><td>non</td><td>&nbsp;</td><td>on</td></tr>
		<tr><td>non</td><td>&nbsp;</td><td>off</td></tr>
		<tr><td>non</td><td>&nbsp;</td><td>on</td></tr>
		<tr><td>non</td><td>&nbsp;</td><td>off</td></tr>
	</table>

	<p>Nombre de lignes : <span id="nblignes"></span></p>
	<p>Nombre de NON : <span id="nbnon"></span></p>
	<p>Nombre de ON : <span id="nbon"></span></p>
</body>
</html>

Modifié par tournikoti (11 Jun 2012 - 07:53)

6troen

11 Jun 2012 à 13:08

Merci tournikoti , Smiley biggrin

C'est "exactement" ce que je cherchais à obtenir ! Smiley cligne

Merci à BlueScreenJunky et à jb_gfx .

Par contre, si BlueScreenJunky pouvait continuer de me brieffer sur le Css ... Smiley confused

6troen

11 Jun 2012 à 13:08

BlueScreenJunky a écrit :
Par exemple pour tes classes .Titre .Artiste .Video .Posteur .Date tu as beaucoup de propriétés identiques qui pourraient être déclarées une seule fois pour les éléments td de ton tableau.
D'ailleurs pour ça tu dois pouvoir jouer avec des balises col pour ne pas remettre la classe à chaque cellule.

Pareil pour les classes .font522018 .font622018 .font722018. j'ai pas trop regardé à quoi ça correspond mais si c'est pour mettre du texte en valeur par exemple pourquoi ne pas appliquer la couleur, police, decoration etc. qui sont identiques à un élément comme <em> ou <strong> et ajouter juste une classe pour faire varier la taille ?

En fait, je pense que tu n'as pas encore bien compris l'intérêt du "Cascading" des CSS (le fait que si tu applique une propriété sur un élément parent elle s'appliquera aussi à tous ses descendants).

Peux-tu m'aider par un exemple .....
Merci d'avance . Smiley smile

Crousti2

11 Jun 2012 à 18:06

Bonjour,

Pourquoi ne passes-tu pas par php ?

6troen

11 Jun 2012 à 21:51

Crousti2 a écrit :
Bonjour,

Pourquoi ne passes-tu pas par php ?

Bonjour Crousti2,

Tout simplement parce que je ne connais pas ce langage, et je n'ai pas envie à 68 ans de me casser la tête avec ! Smiley eek

Mon hébergeur (Free.fr) accepte le Php, mais j'ai commencé et (presque fini... Smiley lol

) réalisé mon site Web en HTML, avec un éditeur wysiwyg : Dreamweaver (MX2004 pour commencer, puis CS5 actuellement) et comme un bon autodidacte, avec tous les produits qui présentent les mêmes agréments du wysiwyg pour les différents éléments de mon site .

Adobe Photoshop Lightroom pour mes diaporamas
Flash CS3 pour mes vidéos et le lecteur JWPlayer,
et tout un tas d'autres utilitaires qui permettent à un néophyte d'avancer malgré le manque de connaissance .
Il ne reste qu' à intégrer les résultats de ces applications dans l'environnement Html souhaité, et voilà !

Certes, il y a beaucoup plus joli, mais cela requiert des connaissances (par exemple, ce que tu proposes ... Smiley lol

) et il est très difficile sans la connaissance de base de se jeter à l'eau.
Les 9/10 des posteurs sur les forums ne "documentent" pas leur réponse, étant quasi persuadés que le gars qui pose la question est un professionnel !
Las .... !
Comment comprendre un exemple bêtement copié-collé .... Smiley biggol

Je trouve que le javascript commence à peu près à rentrer dans mon crâne obtus, tout comme le CSS (et encore .... Smiley confused

) alors, je vais m'en tenir là !

D'autant qu'en ce qui concerne ma présence sur ce forum ne relève que d'une page bien précise de mon site, à cause d'une passion !

Maintenant, pour ne pas mourir bête et ignorant, s'il y a une façon "intelligente" et "pratique" de convertir un site écrit dans un langage html vers du PhP, par un utilitaire, par exemple, là, je suis prêt à essayer ! Smiley rolleyes

6troen

16 Jun 2012 à 20:34

Maintenant que j'ai réussi à intégrer dans ma page le code de comptage si gentiment élaboré par Tournicoti , je cherche à afficher ces résultats sous un autre forme que bêtement littéraire, plus sous forme graphique, style compteur graphique.
Je m'explique : par exemple, au lieu de voir affiché : Total Clips : 1435
je voudrais arriver à afficher : Total Clips : http://gerard.marin.free.fr/RSRBR/musique/images/1-1.gif http://gerard.marin.free.fr/RSRBR/musique/images/4-1.gif http://gerard.marin.free.fr/RSRBR/musique/images/3-1.gif http://gerard.marin.free.fr/RSRBR/musique/images/5-1.gif

chaque chiffre est une image gif.

le script actuel donne ceci :

<!-- SCRIPT Comptage nb clips  -->
<script type="text/javascript">
function compte() {
var NbVideo = 0, NbImage =0; NbAudio = 0; NbOff = 0

var liste = document.getElementById("TableClips").rows;

for (var i=0; i<liste.length; i++)
{
	if (liste[ i ].cells[ 2 ].innerHTML == "Video") NbVideo++;
	if (liste[ i ].cells[ 2 ].innerHTML == "Image")  NbImage++;
	if (liste[ i ].cells[ 2 ].innerHTML == "Audio") NbAudio++;
	if (liste[ i ].cells[ 2 ].innerHTML == "Off")  NbOff++;
}

document.getElementById("nblignes").innerHTML = liste.length-1;
document.getElementById("nbvideo").innerHTML = NbVideo;
document.getElementById("nbimage").innerHTML = NbImage;
document.getElementById("nbaudio").innerHTML = NbAudio;
document.getElementById("nboff").innerHTML = NbOff;

}

window.onload = compte;
</script>

et l'affichage, celà :

<!-------------------------------- panneau comptage ------------------------------->

	<div id="CompteLignes" class="ConteneurNbClipsView"  style="position:absolute; left:20px; top:430px; width:140px; height:45px; z-index:2">
	<p align="left">Total Clips  : <span class="Style38" id="nblignes"></span></p>
	<p align="left">Clips Video  : <span class="Style38" id="nbvideo"></span></p>
	<p align="left">Clips Image  : <span class="Style38" id="nbimage"></span></p>
	<p align="left">Clips Audio  : <span class="Style38" id="nbaudio"></span></p>
	<p align="left">Liens OFF  : <blink><span class="Style37" id="nboff"></span></blink></p>
	</div>

et le Css :


.Style37 {text-align:right; color: #CC0000; font-size: 20px; font-weight: bold;}
.Style38 {color:#FF00CC; font-size: 16px; font-weight: bold;}
.ConteneurNbClipsView
	{padding:0px;
	color:blue;
	font-size:9.0pt;
	font-weight:400;
	font-style:normal;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	}

Aucune idée ...... pour m'orienter vers une solution Smiley decu

6troen

25 Jun 2012 à 18:36

un petit up ? Smiley decu

6troen

27 Jun 2012 à 18:14

Bon, je vois qu'on est en été, et que tout le monde est à sec d'idées ! Smiley lol

Alors, j'ai réalisé ce que je désirais.
J'ai fais un mix entre le code de Tournicoti ( Smiley cligne

) et celui du script de l'horloge de Krucial (Script édité sur l'éditeur Javascript à http://www.editeurjavascript.com), que j'utilise aussi sur la page que je réalise.

Et comme vous êtes tous très sympa, je vous mets le code :

<!-- SCRIPT Comptage et affichage graphique nb clips et répartition par type  -->
<script type="text/javascript">
/* fonction comptage des nb de clips, nb de cellules contenant : Video, Audio, Image & Off . */
function afficheClips()
	{
		var NbVideo = 0; NbImage =0; NbAudio = 0; NbOff = 0
		var liste = document.getElementById("TableClips").rows;

		for (var b=0; b<liste.length; b++)
			{
		if (liste[ b ].cells[ 2 ].innerHTML == "Video") NbVideo++;
		if (liste[ b ].cells[ 2 ].innerHTML == "Image")  NbImage++;
		if (liste[ b ].cells[ 2 ].innerHTML == "Audio") NbAudio++;
		if (liste[ b ].cells[ 2 ].innerHTML == "Off")  NbOff++;
			}
	
document.getElementById("nblignes").innerHTML = liste.length-1;
document.getElementById("nbvideo").innerHTML = NbVideo;
document.getElementById("nbimage").innerHTML = NbImage;
document.getElementById("nbaudio").innerHTML = NbAudio;
document.getElementById("nboff").innerHTML = NbOff;

/*
exploitation des résultats ci-dessus pour affichage en compteur-images de 0 à 9 
*/
		var NbClips = liste.length-1;
		var Videos = NbVideo;
		var Audio = NbAudio;
		var Images = NbImage;
		var Off = NbOff;

/* pose le nb de 0 avant le chiffre inférieur à 10, 100, 1000 pour avoir 4 images . */

		//GlobalClips
		if (NbClips < 10)
			GlobalClips = "000" + NbClips;
		if (NbClips >=10 && NbClips <= 99)
			GlobalClips = "00" + NbClips;
		if (NbClips >=100 && NbClips <= 999)
			GlobalClips = "0" + NbClips;
		if (NbClips >= 1000)
			GlobalClips = "" + NbClips;

		//VideosClips	
		if (Videos < 10)
			VideosClips = "000" + Videos;
		if (Videos >=10 && Videos <= 99)
			VideosClips = "00" + Videos;
		if (Videos >=100 && Videos <= 999)
			VideosClips = "0" + Videos;
		if (Videos >= 1000)
			VideosClips = "" + Videos;

		//AudioClips	
		if (Audio < 10)
			AudioClips = "000" + Audio;
		if (Audio >=10 && Audio <= 99)
			AudioClips = "00" + Audio;
		if (Audio >=100 && Audio <= 999)
			AudioClips = "0" + Audio;
		if (Audio >= 1000)
			AudioClips = "" + Audio;

		//ImageClips	
		if (Images < 10)
			ImageClips = "000" + Images;
		if (Images >=10 && Images <= 99)
			ImageClips = "00" + Images;
		if (Images >=100 && Images <= 999)
			ImageClips = "0" + Images;
		if (Images >= 1000)
			ImageClips = "" + Images;	
			
		//ClipsLiensOff	
		if (Off < 10)
			ClipsLiensOff = "000" + Off;
		if (Off >=10 && Off <= 99)
			ClipsLiensOff = "00" + Off;
		if (Off >=100 && Off <= 999)
			ClipsLiensOff = "0" + Off;
		if (Off >= 1000)
			ClipsLiensOff = "" + Off;

			
/* définition des noms des 4 images nécessaires à l'affichage.  */

			for(a=0;a<4;a++)
			{
/* préparation pour l'affichage des chiffres de  0 à 9 */
			
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgsrc = new Array;
imgsrc[0] = 'imgCpt1/0-1.gif';
imgsrc[1] = 'imgCpt1/1-1.gif';
imgsrc[2] = 'imgCpt1/2-1.gif';
imgsrc[3] = 'imgCpt1/3-1.gif';
imgsrc[4] = 'imgCpt1/4-1.gif';
imgsrc[5] = 'imgCpt1/5-1.gif';
imgsrc[6] = 'imgCpt1/6-1.gif';
imgsrc[7] = 'imgCpt1/7-1.gif';
imgsrc[8] = 'imgCpt1/8-1.gif';
imgsrc[9] = 'imgCpt1/9-1.gif';
i0.src = imgsrc[0];
i1.src = imgsrc[1];
i2.src = imgsrc[2];
i3.src = imgsrc[3];
i4.src = imgsrc[4];
i5.src = imgsrc[5];
i6.src = imgsrc[6];
i7.src = imgsrc[7];
i8.src = imgsrc[8];
i9.src = imgsrc[9];

			obj_img = eval("document.nbclips_img"+(a+1));
	  		ejs_char = GlobalClips.charAt(a);
	  		obj_img.src = imgsrc[ejs_char];
			}
			
			
					for(a=0;a<4;a++)
			//VideosClips
			{
/* préparation pour l'affichage des chiffres de  0 à 9 */
			
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgsrc = new Array;
imgsrc[0] = 'imgCpt10/0-10.gif';
imgsrc[1] = 'imgCpt10/1-10.gif';
imgsrc[2] = 'imgCpt10/2-10.gif';
imgsrc[3] = 'imgCpt10/3-10.gif';
imgsrc[4] = 'imgCpt10/4-10.gif';
imgsrc[5] = 'imgCpt10/5-10.gif';
imgsrc[6] = 'imgCpt10/6-10.gif';
imgsrc[7] = 'imgCpt10/7-10.gif';
imgsrc[8] = 'imgCpt10/8-10.gif';
imgsrc[9] = 'imgCpt10/9-10.gif';
i0.src = imgsrc[0];
i1.src = imgsrc[1];
i2.src = imgsrc[2];
i3.src = imgsrc[3];
i4.src = imgsrc[4];
i5.src = imgsrc[5];
i6.src = imgsrc[6];
i7.src = imgsrc[7];
i8.src = imgsrc[8];
i9.src = imgsrc[9];

			obj_img = eval("document.nbvideo_img"+(a+1));
	  		ejs_char = VideosClips.charAt(a);
	  		obj_img.src = imgsrc[ejs_char];
			}	
			
			
						for(a=0;a<4;a++)
			//AudioClips
			{ 
/* préparation pour l'affichage des chiffres de  0 à 9 */
			
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgsrc = new Array;
imgsrc[0] = 'imgCpt10/0-10.gif';
imgsrc[1] = 'imgCpt10/1-10.gif';
imgsrc[2] = 'imgCpt10/2-10.gif';
imgsrc[3] = 'imgCpt10/3-10.gif';
imgsrc[4] = 'imgCpt10/4-10.gif';
imgsrc[5] = 'imgCpt10/5-10.gif';
imgsrc[6] = 'imgCpt10/6-10.gif';
imgsrc[7] = 'imgCpt10/7-10.gif';
imgsrc[8] = 'imgCpt10/8-10.gif';
imgsrc[9] = 'imgCpt10/9-10.gif';
i0.src = imgsrc[0];
i1.src = imgsrc[1];
i2.src = imgsrc[2];
i3.src = imgsrc[3];
i4.src = imgsrc[4];
i5.src = imgsrc[5];
i6.src = imgsrc[6];
i7.src = imgsrc[7];
i8.src = imgsrc[8];
i9.src = imgsrc[9];


			obj_img = eval("document.nbaudio_img"+(a+1));
	  		ejs_char = AudioClips.charAt(a);
	  		obj_img.src = imgsrc[ejs_char];
			}
			
						for(a=0;a<4;a++)
			//ImageClips
			{ 
/* préparation pour l'affichage des chiffres de  0 à 9 */
			
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgsrc = new Array;
imgsrc[0] = 'imgCpt10/0-10.gif';
imgsrc[1] = 'imgCpt10/1-10.gif';
imgsrc[2] = 'imgCpt10/2-10.gif';
imgsrc[3] = 'imgCpt10/3-10.gif';
imgsrc[4] = 'imgCpt10/4-10.gif';
imgsrc[5] = 'imgCpt10/5-10.gif';
imgsrc[6] = 'imgCpt10/6-10.gif';
imgsrc[7] = 'imgCpt10/7-10.gif';
imgsrc[8] = 'imgCpt10/8-10.gif';
imgsrc[9] = 'imgCpt10/9-10.gif';
i0.src = imgsrc[0];
i1.src = imgsrc[1];
i2.src = imgsrc[2];
i3.src = imgsrc[3];
i4.src = imgsrc[4];
i5.src = imgsrc[5];
i6.src = imgsrc[6];
i7.src = imgsrc[7];
i8.src = imgsrc[8];
i9.src = imgsrc[9];	
	
			obj_img = eval("document.nbimage_img"+(a+1));
	  		ejs_char = ImageClips.charAt(a);
	  		obj_img.src = imgsrc[ejs_char];
			}
			
			for(a=0;a<4;a++)
			//ClipsLiensOff
			{ 
		/* préparation pour l'affichage des chiffres de  0 à 9 */
			
i0 = new Image;
i1 = new Image;
i2 = new Image;
i3 = new Image;
i4 = new Image;
i5 = new Image;
i6 = new Image;
i7 = new Image;
i8 = new Image;
i9 = new Image;
imgsrc = new Array;
imgsrc[0] = 'imgCpt2/0-2.gif';
imgsrc[1] = 'imgCpt2/1-2.gif';
imgsrc[2] = 'imgCpt2/2-2.gif';
imgsrc[3] = 'imgCpt2/3-2.gif';
imgsrc[4] = 'imgCpt2/4-2.gif';
imgsrc[5] = 'imgCpt2/5-2.gif';
imgsrc[6] = 'imgCpt2/6-2.gif';
imgsrc[7] = 'imgCpt2/7-2.gif';
imgsrc[8] = 'imgCpt2/8-2.gif';
imgsrc[9] = 'imgCpt2/9-2.gif';
i0.src = imgsrc[0];
i1.src = imgsrc[1];
i2.src = imgsrc[2];
i3.src = imgsrc[3];
i4.src = imgsrc[4];
i5.src = imgsrc[5];
i6.src = imgsrc[6];
i7.src = imgsrc[7];
i8.src = imgsrc[8];
i9.src = imgsrc[9];	

			obj_img = eval("document.nboff_img"+(a+1));
	  		ejs_char = ClipsLiensOff.charAt(a);
	  		obj_img.src = imgsrc[ejs_char];
			}
	}

</script>

<!------------------------- Panneau du comptage affichage graphique  ---------------------->

<div class="CpteClipsGlobal" id="TotalClips" style="position:absolute; left:5px; top:448px; width:90px; height:29px; z-index:2">Total Clips</div>
<div class="CpteClipsCategory" id="ClipsVideo" style="position:absolute; left:5px; top:479px; width:90px; height:29px; z-index:2">Clips Video</div>
<div class="CpteClipsCategory" id="ClipsImage" style="position:absolute; left:5px; top:508px; width:90px; height:29px; z-index:2">Clips Image</div>
<div class="CpteClipsCategory" id="ClipsAudio" style="position:absolute; left:5px; top:538px; width:90px; height:29px; z-index:2">Clips Audio</div>
<div class="LiensOff" id="LiensOff" style="position:absolute; left:5px; top:570px; width:90px; height:15px; z-index:2"><blink>Liens Off</blink></div>		
        

<!------------------------- Compteurs affichage graphique  ---------------------->

<div id="CpteTotalClips" style="position:absolute;left:95px; top:430px; width:84px; height:1px; z-index:2">
<TABLE width="84"  CELLPADDING=0 CELLSPACING=0>
  <TR><TD><p><IMG SRC="imgCpt1/0-1.gif" NAME="nbclips_img1" width="21" height="29" /><IMG SRC="imgCpt1/0-1.gif" NAME="nbclips_img2" width="21" height="29" /><IMG SRC="imgCpt1/0-1.gif" NAME="nbclips_img3" width="21" height="29" /><IMG SRC="imgCpt1/0-1.gif" NAME="nbclips_img4" width="21" height="29" /></p>
   </TD>
</TR></TABLE>
 </div>
<div id="CpteClipsVideo" style="position:absolute;left:95px; top:460px; width:84px; height:1px; z-index:2">
<TABLE width="84"  CELLPADDING=0 CELLSPACING=0>
  <TR><TD><p><IMG SRC="imgCpt10/0-10.gif" NAME="nbvideo_img1" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbvideo_img2" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbvideo_img3" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbvideo_img4" width="21" height="29" /></p>
   </TD>
</TR></TABLE>
 </div>
 <div id="CpteClipsImage" style="position:absolute;left:95px; top:490px; width:84px; height:1px; z-index:2">
<TABLE width="84"  CELLPADDING=0 CELLSPACING=0>
  <TR><TD><p><IMG SRC="imgCpt10/0-10.gif" NAME="nbimage_img1" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbimage_img2" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbimage_img3" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbimage_img4" width="21" height="29" /></p>
   </TD>
</TR></TABLE>
 </div>
<div id="CpteClipsAudio" style="position:absolute;left:95px; top:520px; width:84px; height:1px; z-index:2">
<TABLE width="84"  CELLPADDING=0 CELLSPACING=0>
  <TR><TD><p><IMG SRC="imgCpt10/0-10.gif" NAME="nbaudio_img1" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbaudio_img2" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbaudio_img3" width="21" height="29" /><IMG SRC="imgCpt10/0-10.gif" NAME="nbaudio_img4" width="21" height="29" /></p>
   </TD>
</TR></TABLE>
 </div>
<div id="CpteClipsOff" style="position:absolute;left:95px; top:550px; width:84px; height:1px; z-index:2">
<TABLE width="84"  CELLPADDING=0 CELLSPACING=0>
  <TR><TD><p><IMG SRC="imgCpt2/0-2.gif" NAME="nboff_img1" width="21" height="35" /><IMG SRC="imgCpt2/0-2.gif" NAME="nboff_img2" width="21" height="35" /><IMG SRC="imgCpt2/0-2.gif" NAME="nboff_img3" width="21" height="35" /><IMG SRC="imgCpt2/0-2.gif" NAME="nboff_img4" width="21" height="35" /></p>
   </TD>
</TR></TABLE>
 </div>
<!-------------------------------- FIN panneau compteurs ------------------------------->

<!-------------------------------- panneau comptage caché ------------------------------->

	<div id="CompteLignes" class="ConteneurNbClipsView"  style="position:absolute; left:20px; top:430px; width:140px; height:45px; z-index:2; visibility: hidden;">
	<p align="left">Total Clips  : <span  id="nblignes"></span></p>
	<p align="left">Clips Video  : <span  id="nbvideo"></span></p>
	<p align="left">Clips Image  : <span  id="nbimage"></span></p>
	<p align="left">Clips Audio  : <span  id="nbaudio"></span></p>
	<p align="left">Liens OFF  : <span  id="nboff"></span></p>
  </div>
	
<!------------------------------ fin panneau comptage caché -----------------------------> 

<!-------------------------------- FIN Panneau du comptage affichage graphique ------------------------------->

Vous pouvez remarquer que j'ai caché la partie affichage des résultats du script de Tournicoti,
parceque si je la supprime, la partie que j'ai implémenté ne compte plus .... Smiley fache

et je n'ai pas compris pourquoi . Smiley decu

Bon, puisqu'on peut cacher le div .... Smiley lol

Je suis sûr qu'il y a moyen de simplifier, mais bon, pour un débutant en Javascript ..... Smiley biggol

Enfin, j'accepte toutes les critiques (constructives Smiley lol

) .

Sujet clos

Questions générales et questions de débutants

[Résolu] Afficher dans un Compteur Graphique, le Nb de lignes d'un ta