Pseudo selectbox en dhtml ...

Commenter

Contenu du snippet

Salut à tous,
Pour éviter de recevoir des commentaires comme quoi ce que j'ai fait est nul ou mal écrit, je vais expliquer un peu plus pourquoi je poste ça ...
Je suis en train d'essayer de coder en Javascript une machine de Turing entièrement personnalisable mais surtout avec une interface utilisateur. Du coup, une partie du developpement est porté sur cette interface, et ce que je poste maintenant en fait parti. En effet, je devais trouver un moyen pour que l'utilisateur puisse entrer des quintuplets (que l'on appelle Etat, d'où le nom Behavior) où les éléments sont séparés par des virgules, et qu'ensuite ceux-ci soient affichés dans une SelectBox ou l'utilisateur pouvait supprimer les entrées qu'il voulait.
Du coup, pour que ce soit plus joli, j'ai abandonné l'option des balises select/option, pour me débrouiller autrement ...
Et ça donne cette source. Il faut 5 caractères quelconques, séparés par des virgules ([', g, ", o, e], par exemple ...). Ensuite, ils s'ajoutent au tableau.

Source / Exemple : 


<html>
   <head>
      <title>[Gestion des différents états]</title>
      <style type="text/css">
         img
         {
            padding: 0px;
            margin: 0px;
         }
         #BehaviorList
         {
            padding: 0px;
            margin: 0px;
            background-color: #FFFFFF;
            border-style: solid;
            border-color: #000000;
            border-width: 1px;
            padding: 0px;
            margin: 0px;
            border-collapse: collapse;
            font-size: 11px;
            font-color: #000000;
            font-family: Courier New;
            vertical-align: middle;
            text-align: center;
         }
         #BehaviorList tbody td
         {
            width: 15px;
            height: 15px
            background-color: #FFFFFF;
            border-style: solid;
            border-color: #AAAAAA;
            border-width: 1px;
         }
         #BehaviorList thead th
         {
            font-weight: bold;
            background-color: #DDDDDD;
            border-style: solid;
            border-width: 1px;
            border-color: #777777;
            height: 15px;
            width: 15px;
         }
      </style>
      <script type="text/javascript">
         var aBehaviorList = new Array();
         function CreateBehavior(cString)
         {
            aBehavior = new Array(aBehaviorList.length + 1, "", "", "", "", "");
            i = 0;
            j = 1;
            while(i < cString.length)
            {
               if(cString.substr(i, 1) == ",")
               {
                  j++;
               }
               else
               {
                  aBehavior[j] = aBehavior[j] + cString.substr(i, 1)
               }
               i++;
            }
            return aBehavior;
         }
         function AddBehavior(cString)
         {
            oBehaviorList = document.getElementById("BehaviorList");
            aBehavior = CreateBehavior(cString);
            aBehaviorList.unshift(aBehavior);
            WriteBehavior(aBehavior);
         }
         function WriteBehavior(aBehavior)
         {
            oBehaviorList = document.getElementById("BehaviorList");
            oImg = document.createElement("img");
            oImg.src = "cross.png";
            oImg.style.cursor = "hand";
            oImg.alt = "Supprimer ..."
            oBehaviorList.tBodies[0].insertRow(0);
            oBehaviorList.tBodies[0].rows[0].insertCell(0);
            oBehaviorList.tBodies[0].rows[0].cells[0].appendChild(oImg);
            oBehaviorList.tBodies[0].rows[0].cells[0].onclick = function(){DelBehavior(aBehavior[0]);};
            i = 0;
            while(i < Math.min(aBehavior.length, oBehaviorList.tHead.rows[0].cells.length - 1))
            {
               oBehaviorList.tBodies[0].rows[0].insertCell(i + 1);
               oTxt = document.createTextNode(aBehavior[i]);
               oBehaviorList.tBodies[0].rows[0].cells[i + 1].appendChild(oTxt);
               i++;
            }
         }
         function DelBehavior(Index)
         {
            oBehaviorList = document.getElementById("BehaviorList");
            aOldList = aBehaviorList;
            aBehaviorList = new Array();
            i = 0;
            while(i < aOldList.length)
            {
               if(aOldList[i][0] == Index)
               {
                  oBehaviorList.tBodies[0].deleteRow(i);
               }
               else
               {
                  aBehaviorList.push(aOldList[i]);
               }
               i++;
            }
         }
      </script>
   </head>
   <body>
      <form action="#">
         <input id="BehaviorInput" type="input" value="" /><input type="button" value="AddBehavior();" onclick="AddBehavior(this.previousSibling.value); this.previousSibling.value = ''"><br />
         <table id="BehaviorList">
         <thead>
            <tr>
               <th>a</th>
               <th>b</th>
               <th>c</th>
               <th>d</th>
               <th>e</th>
               <th>f</th>
               <th>g</th>
            </tr>
         </thead>
         <tbody>
         </tbody>
         </table>
      </form>
   </body>
</html>

Conclusion :


Si je poste ça, c'est pour montrer les possibilité du DHTML et du modèle DOM du Javascript. Déjà, tout est compatible Firefox/Internet Explorer, et ça permet de pas mal apprendre au niveau de la gestion des nodes et des tableaux. Alors j'espère que ça peut aider à comprendre le Javascript pour les débutants, parce que si ça, c'est compris, alors tout est compris !
++
L.S.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (LocalStone)