créer un arbre en javascript

**hbarramou** · 16/03/2012, 11h47

Salut a tous,

je cherche un script pour créer une arborescence d’objet html ( puces ou lien …):au début je n’ai que le nœud racine et un bouton ajouter et lorsque je click sur le bouton un nœud fils s’ajoute au nœud qui est sélectionné par la sourie.et ainsi de suite jusqu’à construire un arbre à une nombre indéfini de nœuds.

Quelqu'un peut-il m'aider?
D'avance merci
Hanane

**NoSmoking** · 16/03/2012, 15h17

Bonjour,
voir du coté des méthodes de l'objet document comme createElement ou autre appendChild.

**Sam31000** · 17/03/2012, 12h13

Salut,

Voila un petit script qui permet de faire une arborescence dans une liste.
Tu peux le tester avec ce code.

Tu sélectionnes un noeud à la souris, puis tu appuies sur le bouton.

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
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="txt/css">
            ul, li{
                width : 50px;
                border : 1px solid black;
            }
        </style>
    </head>
    <body>
 
        <script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
        <script type="text/javascript">google.load("jquery", "1.7");</script>
        <script type="text/javascript">
            $(document).ready (function (){
 
                var number = 0;
 
                var selectedItem = null;
 
                //On selectionne l'élément de la liste dans lequel on veut ajouter un fils.
                $("li").live('click', function(e) {
                    selectedItem = $(e.target);
                });
 
                 $("ul").click(function(e) {
                   selectedItem = $(e.target);
                });
 
                //On ajoute le fils en fonction du père :
                // -Si c'est un <ul> on ajoute un <li>
                // -Si c'est un <li> on ajoute un <ul>
                $("#button_add_node").click (function () {
 
                    if (selectedItem == null)
                        alert ("Please select a valid item before adding node");
                    else {
                        switch (selectedItem.get(0).tagName )
                        {
                            case "UL" :
                                selectedItem.append("<li>New Node</li>");
                            break;
                            case "LI" :
                                selectedItem.append("<ul>New Node</ul>");  
                            break;
                            default :
                                alert ("Please select a valid item before adding node");
                        }
                    }
                });
            });
        </script>
        <div id="tree">
            <ul>
                root
            </ul>
        </div>
        <div>
            <input type="button" id="button_add_node" value="Add node"/>
        </div>
    </body>
</html>

créer un arbre en javascript

JavaScript

Discussions similaires

Partager

Partager