Remplacer les input par des div

Signaler
Messages postés
2
Date d'inscription
samedi 25 février 2006
Statut
Membre
Dernière intervention
22 juin 2007
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Il y a tout une serie input crée en javascript. Ceci pose probleme, cela alourdit le DOM et ralentit la page.

pour contrecarrer le probleme, il faudrait remplacer les input par
des div et que lorsque l'on clique sur une case, celle-ci se transforme
en input.

mais je suis debutant en javascript je sais pas comment faire

voici le code de probleme:


function majTableauInventaire(listeProduits) {


var resultHTML = "
";


resultHTML += "\";

resultHTML += \"----
\";

resultHTML += \" Produits
";

// if (tableauMode == tableauModeLieu) {

resultHTML += " classés par rubrique";

// }

resultHTML += " |\";

resultHTML + = \"Unité |\";

resultHTML += \" Total |\";

for ( var indexLieu = 0 ; indexLieu < listeLieuxStockage.length ; indexLieu ++ ) {

resultHTML+= \" "+listeLieuxStockage[indexLieu].nom+" |\";

}

resultHTML + = \"Prix |\";

resultHTML += \"\";

resultHTML += \"\";

var rubriquePrecedente = \"\";

for ( var i = 0 ; i < listeProduits.length ; i++ ) {

if ((listeProduits[i].rubriqueNomComplet!=rubriquePrecedente) && ( isGroupByRubrique == true )) {

rubriquePrecedente = listeProduits[i].rubriqueNomComplet;

var colspan = listeLieuxStockage.length + 4;

resultHTML+=\"----
"+rubriquePrecedente+", \";

}

resultHTML+=\"<tr
id=\\"prd_ligne_\"+listeProduits[i].id+\"_\"+listeProduits[i].idUnite+\"\\">"+listeProduits[i].nom+", \";

resultHTML+=\""+listeProduits[i].unite+", \";

resultHTML+=\"&nbsp;, \";

for ( var indexLieu = 0 ; indexLieu < listeLieuxStockage.length ; indexLieu ++ ) {

// on met autocomplete=\"off\" a cause des problemes au niveau des
firemoveDown et fireMoveUp (si on a des valeur deja dans l'input ça
genere des erreurs javascript)
resultHTML+=\", \";

resultHTML+=\", \"

}

resultHTML+=\", \";

resultHTML+=\"\";

}

resultHTML += \"----
Sous Total de la selection
valoris&eacute; :, \";

$(\"status\").innerHTML = \"\";

resultHTML += \"\";

resultHTML += "

";


$('tableauInventaire').innerHTML = resultHTML;


// gestion des evenements sur les champs input du tableau


for ( var i = 0 ; i < listeProduits.length ; i++ ) {


for ( var indexLieu = 0 ; indexLieu < listeLieuxStockage.length ; indexLieu ++ ) {


var elementId = createInputId(listeProduits[i],indexLieu);


var element = $(elementId);


element.produit = listeProduits[i];


element.lieu = indexLieu;


Event.observe(elementId,"change",changedProduit.bindAsEventListener(element),true);


Event.observe(elementId,"keypress",keypressProduit.bindAsEventListener(element),true);


Event.observe(elementId,'focus',focusProduit.bindAsEventListener(element),true);


Event.observe(elementId,'blur',blurProduit.bindAsEventListener(element),true);


}


}


// gestion des evenements sur la case a cocher qui permete de trier les produits


Event.observe("checkboxClassement","change",changedCheckboxClassement.bindAsEventListener($("checkboxClassement"),true));


updateInventaireValues();


stripe('inventaire_stripe','#F9F6CF','#ffffff');


}

1 réponse

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

c'est parce que tu les ajoutes dans innerHTML.
c'est très bien et très pratique, mais les performances se dégradent s'il y a trop d'ajouts,
    remplacer par un div ne changera rien... je ne parle pas de la gymnastique
    pour "transformer en input texte"



fais tes ajouts dans ce style :
    xyz = document.createElement("INPUT") ;
    xyz.id = "id du xyz" ;
    xyz.setAttribute("type", "text") ; ...
    document.getElementById("id élément où ajouter").appendChild(xyz) ;







<hr />
            Cordialement       Bul    [mon Site]    [M'écrire]
<hr />