[Javascript][php]afficher/cacher lignes tableau

Version imprimable

Bonjour
J'ai un probleme pour cacher et afficher quelques lignes d'un tableau.
Voici mon code :
Fiche php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <table> ... <td width='258' valign='middle' colspan='2' class='fondblanc' nowrap><a href=\"javascript:onclick=montrer('CachMontr')\">libelle</a></td> <tr> <td colspan='21' height='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td> </tr> <div id='CachMontr'> "( Fonction d'ajout de ligne en php )" </div> <tr> <td colspan='21' height='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td> </tr> ... </table>
fichier Javascript
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function montrer( idElement ) { //style='display : none' etat=document.getElementById(idElement).style.visibility; alert(etat); if(etat=="hidden") { document.getElementById(idElement).style.visibility="visible"; //document.getElementById(idElement).style.display='inline'; } else{ document.getElementById(idElement).style.visibility="hidden"; //document.getElementById(idElement).style.display='none'; } }
Mes lignes s'affichent bien grace a ma fonction php d'ajout de lignes de mon tableau, l'alert de mon javascript montre bien l'etat hidden et visible mais les lignes de mon div se sont pas caché.

Pourriez vous me dire si c'est un probleme de javascript ? Avez vous une idee du probleme?
Merci d'avance.
Bouba.

Essaye la propriété "display"
Code:

1 2 3 4 5 //montrer document.getElementById(idElement).style.display="inline"; //cacher document.getElementById(idElement).style.display="none";
Edit : ah mince j'avais pas vu mais tu l'a déjà essayé dans ton code

désolée de répondre si tard ( Les fetes les chocolats tout ça tout ça ).

Oui en effet j'ai aussi essayé cette methode. Je ne sais plus quoi faire.

J'ai trouvé un moyen d'afficher plusieurs lignes de mon tableau mais c'est juste pour un nombre de ligne donné et moi je voudrais sans donner le nombre de ligne voici mon code :

J'ai ma fonction php qui liste les lignes de mon tableau :

Code:

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
 
/*
** Function sListeContenu
** Input : $sIdLigne string qui permet de connaitre l'id de la ligne pour pouvoir la cacher ou non,
$idPortfeuille le portfeuille de l'utilisateur,
$idTable id de la table de theme,
$sNomTheme nom de la table du theme,
$sElement1,$sElement2 element à selectionner dans la table
** Output : $sContenu string
** Description : permet de lister une table en fonction des parametres en entree sous forme de ligne de tableau
** Creator : 
** Date : date de création
*/
function sListeContenu ($sIdLigne,$idPortfeuille,$idTable,$sNomTheme,$sElement1,$sElement2)
{
    //Langue de l'utilisateur
     $slangue = $_SESSION['langue'];
 
     $oConn = new Connexion();
 
     if($sElement1 == '')
     {//          
         $sContenu='';
     }
     else if($sElement2 == '')
     {//
         $sSqlContenu="SELECT '".$idTable." ,idDomaine ,num_ordre ,".$sElement1." FROM ".$sNomTheme." WHERE idPortfolio='".$idPortfolio."' ORDER BY num_ordre";
          $aResContenu=$oConn->aExecuter($sSqlContenu);
     }
     else
     {// 
         $sSqlContenu="SELECT ".$idTable." ,idDomaine ,num_ordre ,".$sElement1." , ".$sElement2." FROM ".$sNomTheme." WHERE idPortfolio='".$idPortfolio."' ORDER BY num_ordre";
          $aResContenu=$oConn->aExecuter($sSqlContenu);
     }
 
    //Pour connaitre le nombre de ligne total a la fin donc le nombre d'expérience ou le nombre de langues apprises par exemple
     //global $indice;
     $indice=0;
 
     foreach($aResContenu as $i=>$v)
     {
          $sSqlDomaine="SELECT libelle_".$slangue." FROM ref_domaine WHERE idDomaine=".$aResContenu[$i]['idDomaine'];
          $aResDomaine=$oConn->aExecuter($sSqlDomaine);
          $aResContenu[$i]['domaine'] = $aResDomaine['0']['libelle_'.$slangue];
 
          $sContenu = $sContenu."
           <tr id=".$sIdLigne."".$indice." style='display : none'>
           <td width='13' class='fondgrisclair2' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='17' class='fondgrisclair2' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='17' class='fondgrisclair2' nowrap><img src='../Images/flecheoff.gif' alt='' border='0'></td>
           <td width='241' valign='middle' class='fondgrisclair2' nowrap><a href='#'>".$aResContenu[$i][$sElement1]."</a></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='87' align='center' valign='middle' class='fondgrisclair2' nowrap><span class='textenoir'>".$aResContenu[$i][$sElement2]."</span></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='86' align='center' valign='middle' class='fondgrisclair2' nowrap><span class='textenoir'>".$aResContenu[$i]['domaine']."</span></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='62' class='fondgrisclair2' nowrap><a href='#'><img src='../Images/editer.gif' alt='Editer une fiche' border='0'></a></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='69' class='fondgrisclair2' nowrap><a href='#'><img src='../Images/ajouter.gif' alt='Ajouter une fiche' border='0'></a></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='69' class='fondgrisclair2' nowrap><a href='#'><img src='../Images/supprimer.gif' alt='Supprimer une fiche' border='0'></a></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='90' align='center' valign='middle' class='fondgrisclair2' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='37' align='center' valign='middle' class='fondgrisclair2' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='75' class='fondgrisclair2' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
           <td width='64' align='center' valign='middle' class='fondgrisclair2' nowrap><input type='checkbox' name='sel71' value=''></td>
          </tr>
          ";
 
          $indice++;
 
     }
     $sContenu=$sContenu."<tr><td colspan='21' height='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td></tr>";
     return $sContenu;
}

fonction javascript :

Code:

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
 
function montrer(num,idLigne)
{
    //num : le nombre de ligne à cacher/afficher
    //idLigne : id de la ligne à afficher/cacher
      // Booléen reconnaissant le navigateur 
 
      isIE = (document.all) ;
      isFF = (!isIE) && (document.getElementById);
 
     for (var i = 0; i<=num; i++) 
     {
          if (isIE) sligne = document.all[idLigne + i];
          if (isFF) sligne = document.getElementById(idLigne + i);
          if (sligne.style.display == "none")
          {
               // Cas ou le tableau est caché
               sligne.style.display = "";
          }
          else
          {
              // On le cache
              sligne.style.display = "none";
          }
     }
 
}

Comme vous pouvez le constater, je suis obligée de donner le num de lignes a cacher ou a montrer...

fichier principal :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
...
<td width='258' valign='middle' colspan='2' class='fondblanc' nowrap>
    <a href=\"javascript:onclick=montrer(3,'".$aResOrdothemes['6']['nom_theme']."')\">".$aResOrdothemes['6']['libelle']."</a>
</td>
...
<tr>
      <td colspan='21' height='1' class='fondgrisclair' nowrap><img src='../Images/pixel.gif' alt='' border='0'></td>
 </tr>
     ".sListeContenu($aResOrdothemes['6']['nom_theme'], $_SESSION['idPortfolio'], $aResOrdothemes['6']['idTheme'], $aResOrdothemes['6']['nom_theme'], "emploi", "date")."
 <tr>
...

Comme vous pouvez le voir, je suis obligée de donner le nombre de lignes pour que la fonction javascript montrer() affiche bien 3 lignes, si l'utilisateur a plus de lignes elles ne seront pas visibles.
sListeContenu est la fonction pour lister les lignes du tableau.

J'ai eu l'idée de déclarer la variable $indice comme global puis de la mettre en premier parametre de la fonction javascript montrer() mais ça ne fonctionne pas .
Si je ne suis pas assez claire, dites le moi.

Voili voilou
Si vous pourriez m'aider je vous en serais tres reconnaissante.

Biz Bouba.

Après maintes recherches et maintes aide d'un peu beaucoup de personnes dans mon entourage je suis arrivée à quelque chose de satisfaisant:

Je vous donne un exemple comme ca ca pourrais aider d'autres personnes :

fichier javascript :

Code:

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
 
function getElementsByClassName(clsName,htmltag)
{ 
   var arr = new Array(); 
   var elems = document.getElementsByTagName(htmltag);
   for ( var cls, i = 0; ( elem = elems[i] ); i++ )
   {
      if ( elem.className == clsName )
      {
         arr[arr.length] = elem;
      }
   }
   return arr;
}
 
Array.prototype.dspAllElements = function()
{
    var i = 0;
    while( i < this.length )
    {
       //alert(this[i].id);
       if(this[i].style.display == "block")
       {
          this[i].style.display = "none";
       }
       else
       {
	this[i].style.display = "block";
       }
        i++;
    }
}
function showAllElements()
{
   var aListeTmp1	= getElementsByClassName( 'ligneMod', 'tr');
   var aListe	= aListeTmp1;
   aListe.dspAllElements();
}

fichier php

Code:

1
2
3
4
5
6
7
8
9
 
...
<table>
...
<tr><td><a href=\"javascript:showAllElements();\">Libelle</a></td></tr>
...
".sListeContenu()."
</table>
...

fichier fonction php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function sListeContenu ()
{
    /* Tratement avec la base de donnée */
  foreach($aResContenu as $i=>$v)
  {
     $sContenu = $sContenu."<tr style='display : none' class='ligneMod'>
	<td>$aResContenu[$i]['libelle_1']</td>
	<td>$aResContenu[$i]['libelle_2']<td>
             </tr>";
     $indiceTmp++;
  }
  return $sContenu;
}

Et donc quelle que soit le nombre de lignes dans la table à cacher/afficher ca fonctionne correctment

à ne pas oublier dans le fichier CSS de définir la classe ligneMod.
Il est vrai que j'ai quelques problèmes d'affichage sur FF mais je pense que ce sera vite réglé.

Biz Bouba.