Forum Programmation.web javascript : remplacer une ligne de tableau

Posté par  .
Étiquettes : aucune
0
17
oct.
2004
Voilà, j'ai marqué une ligne spéciale dans un tableau :
<tr id="newcompo">
</tr>

et je voudrais la remplacer par une autre ligne + cette même ligne pour de future insertions et avoir :
<tr id="newcompo"></tr>
<tr><td>ma ligne et toussaaa....</td></tr>
actuellement j'ai :
document.getElementById('newcompo').innerHTML = "<tr><td>ma ligne et toussaaa...</td></tr>";

seulement ça ne s'affiche pas comme il faut car je suppose que ça produit :
<tr id="newcompo">
<tr><td>ma ligne et toussaaa....</td></tr>
</tr>

donc comment faire ?
  • # Hum... Ca se corse....

    Posté par  . Évalué à 2.

    Et c'est toujours les mêmes !
    Pas de probs....
    As-tu essayé d'utiliser le DOM (Document Object Model) ?
    Déjà, ça fait plus propre et plus pro que d'utiliser la fonction (toute pourrie en plus), innerHTML.
    Je n'ai pas ce qui faut pour tester pour l'instant, mais je pourrais regarder demain au taf'. Sinon, a mon avis, il faut utiliser :

    1) L'instanciation d'objet comme dans ton problème précédent.
    2) La fonction d'ajout d'élément (appendChild).

    Dans l'ordre, on arriverait donc à quelque chose du genre :

    ligne = document.createElement ('tr');
    case = document.createElement ('td');
    texte = document.createTextNode ('ma ligne et tout ça blablabla');
    case.appendChild (texte);
    ligne.appendChild(case);
    document.getElementById ('superTableau').appendChild (ligne);

    Bon, puis allez, je trouvais ça tellement marrant que j'en ai fait une page de test dont je te livre le source ci-dessous :
    <html>
    <head>
    <script type="text/javascript">
    function ajouteLigne ()
    {
    ligne = document.createElement ('tr');
    cell = document.createElement ('td');
    texte = document.createTextNode ('ma ligne et tout ça blablabla');
    cell.appendChild (texte);
    ligne.appendChild(cell);
    document.getElementById ('superTableau').appendChild (ligne);
    }
    </script>
    </head>
    <body>
    <table id="superTableau">
    </table>
    <a href="#" onclick="ajouteLigne();">Cliquez pour ajouter du texte"</a>
    </body>
    </head>
    • [^] # Re: Hum... Ca se corse....

      Posté par  . Évalué à 2.

      En fait j'ai déjà le html de la ligne <tr>...</tr> de disponible. Il faut que je le transforme en un élément pour l'utiliser.
      document.getElementById ('superTableau').appendChild (ligne);
      ligne est un objet si je comprends bien seulement j'ai déjà le HTML que je ne peux découper.
      • [^] # Re: Hum... Ca se corse....

        Posté par  . Évalué à 1.

        igne est un objet si je comprends bien seulement j'ai déjà le HTML que je ne peux découper.
        Excuses-moi de me méler de ce qui ne me regarde pas, mais pourquoi ?
        Si tu as le code html, pourquoi ne transformes-tu pas ça en code Js comme je te l'indique ? A moins que ce ne soit du "code" html pré-fourni ? Dans ce cas, Javascript dispose de fonctions de traitement de chaines assez bas niveau, mais ça devrait permettre de pouvoir faire la conversion....
        Bref, je ne vois pas trop où se situe le problème ? Sinon, il doit y avoir moyen de passer du "texte" qui sera interprété comme du code html par le biais de write ou wirteln ou innerhtml, mais sérieusement, je ne pense pas que ce soit une bonne idée....
        Voilà, désolé, mais je n'ai pas plus d'idée que ça pour l'instant...
      • [^] # Re: Hum... Ca se corse....

        Posté par  . Évalué à 1.

        Quand on n'a pas de tête....
        J'oubliais : as-tu essayé le code que je te donne ci-dessus ? Il fait exactement ce que tu veux faire, sans passer par cet artifice 'moche' d'avoir une ligne sans th ni td appelée 'newcompo'....
        Si tu veux insérer à un endroit précis de ton tableau, passes plutôt par les fonctions de parcours d'objet pour te placer où tu veux, puis insère l'élément comme je te le proposais initialement....
        • [^] # Re: Hum... Ca se corse....

          Posté par  . Évalué à 2.

          voici le code exact que j'ai actuellement (en language templeet) :

          <script type="text/javascript">
          /*window.opener.w1.document.getElementById(\'newcompo\').innerHTML = "~str_replace(~array("\n","\""),~array("","\\\""),~include('list_composants.tmpl'))";*/

          ligne=document.createElement("~str_replace(~array("\n","\""),~array("","\\\""),~include('list_composants.tmpl'))");
          window.opener.w1.document.getElementById(\'compo\').appendChild(ligne);
          /*this.close();*/
          </script>

          Le template list_composants.tmpl me fournit une ligne <tr></tr> dans mon cas.

          Le tableau compo est dans un autre popup et est généré lui aussi.

          C'est pour un outil d'inventaire de parc informatique, je rajoute des composants dans un poste depuis la fenêtre principale et au final, ça s'ajoutera dans le formulaire de la fenêtre d'édition du poste directement.
          Je n'ai pas trop utilisé de javascript jusque là et je voulais mettre de l'interactivité pour que ce soit plus rapide et simple pour l'équipe qui gère le parc.
          Je compte mettre l'outil à disposition vers début 2005 sous licence GPL/Cecill.
          • [^] # Re: Hum... Ca se corse....

            Posté par  . Évalué à 2.

            Je me réponds :)
            j'ai changé, j'ai mis ça et ça semble marcher un peu mieux :

            t=window.opener.w1.document.getElementById(\'compo\');
            l=t.insertRow(t.rows.length);
            l.innerHTML = "~str_replace(~array("\n","\""),~array("","\\\""),~include('list_composants.tmpl'))";

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.