appendchild dans une grille

**stroumfs** · 30/07/2009, 22h44

Bonjour, j'ai actuellement un petit problème. Présentement dans ma page j'ai une grille qui pourrait contenir plusieurs centaines de données.

Lorsque je clique dans une cellule ou que j'utilise les flèches du clavier je met un textbox directement dans la cellule en question avec la méthode appendChild. Le problème est qu'après un certain nombre de données ma grille deviens particulièrement lente.

J'ai aussi essayé d'obtenir la position exact de la cellule en passant par le offsetParent, mais la position qui m'es retournée est toujours là même et je ne comprend pas tout à fait ce qui se passe de ce côté là.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var element;
var top = 0;
var left = 0;
while (element = element.offsetParent)
{
 if(element.offsetParent)
 {
  top += element.offsetTop;
  left += element.offsetLeft;
  element = element.offsetParent;
 }
}

Je sais pour avoir lu à plusieurs endroit que la méthode appendChild peu être par moment très lente. En gros ce que je souhaite savoir c'est :

existe-til une autre méthode(plus rapide) pour insérer le textbox dans la cellule ou encore trouver la position exact de la cellule en question??

**franculo_caoulene** · 31/07/2009, 10h32

Salut,

Tout d'abord qu'est-ce qu'une grille pour toi? Un élément table? D'après ce que je comprends de ce que tu fais, tu positionne le champ texte plutôt que dans l'insérer dans on parent qui devrait être un td. Exemple :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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" lang="fr">
<head>
    <title>insérer un champ texte dans une cellule</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    * {margin:0;padding:0;}
    table {background:#333;}
    td {width:8em;height:1em;background:#666;}
    body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
    </style>
</head>
<body>
  <form id="f" method="post">
  <table>
    <tr><td class="g"></td><td class="d"></td></tr>
    <tr><td class="g"></td><td class="d"></td></tr>
    <tr><td class="g"></td><td class="d"></td></tr>
    <tr><td class="g"></td><td class="d"></td></tr>
    <tr><td class="g"></td><td class="d"></td></tr>
  </table>
  </form>
  <script type="text/javascript">
  <!--
  var FC = {
    Evenement: {
      evenements: [],
      ajouter: function(elm, evt, fn) {
        var fni = function(e) {                             // prévient le comportement par défaut
          if (fn(e)===false) {                              // false explicitement car peut être undefined en cas de délégation d'évènement
            if (e.preventDefault) { e.preventDefault(); }
            else { e.returnValue = false; }
          }
        };
        if (document.addEventListener) { elm.addEventListener(evt, fni, false); }
        else if (document.attachEvent) { elm.attachEvent("on" + evt, fni); }
        FC.Evenement.evenements.push([elm, evt, fni]);
      },
      supprimer: function(elm, evt, fn) {
        var evts = FC.Evenement.evenements;
        for (var i=evts.length-1; i>=0; i--) {
          if (evts[i][0]===elm && evts[i][1]===evt) {
            if (document.removeEventListener) { elm.removeEventListener(evts[i][1], evts[i][2], false); } 
            else if (document.detachEvent) { elm.detachEvent("on" + evts[i][1], evts[i][2]); }
            FC.Evenement.evenements.splice(i,1);
          }
        }
      }
    }
  }
  FC.Evenement.ajouter(document, "click", function(e) {
    var elm = e.target || event.srcElement;
    //alert(elm.tagName.toLowerCase);
    if (elm.tagName.toLowerCase()==="td") {
      var input = document.createElement("input");
      input.type = "text";
      input.name = "i"+elm.className+elm.parentNode.rowIndex;
      input.id = input.name;
      elm.appendChild(input);
    }
  });
  /*var Utils = {
    toSelect : function(p, e) {
      var s = document.createElement("select");
      var o = document.createElement("option");
      var o1 = document.createTextNode("o1");
      s.setAttribute("id", "s");
      s.setAttribute("name", "s");
      o.setAttribute("value", "o1");
      o.appendChild(o1);
      s.appendChild(o);
      p.replaceChild(s, e);
    },
    toInput : function(p, e) {
      var i = document.createElement("input");
      i.setAttribute("id", "i");
      i.setAttribute("name", "i");
      i.setAttribute("type", "text");
      p.replaceChild(i, e);
    }
  };
  
  document.getElementById("select").onclick = function() {
    if (document.getElementById("i"))
      Utils.toSelect(document.getElementById("c"), document.getElementById("i"));
  }
  document.getElementById("input").onclick = function() {
    if (document.getElementById("s"))
      Utils.toInput(document.getElementById("c"), document.getElementById("s"));
  }*/
  -->
  </script>
</body>
</html>

appendchild dans une grille

JavaScript

Vue hybride

Discussions similaires

Partager

Partager