remplacer les input par des div

Question

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 += "&nbsp;class&eacute;s&nbsp;par&nbsp;rubrique";

// }

resultHTML += "  |\";

resultHTML + = \"Unit&eacute; |\";

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');


}

cs_bultez · Answer

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) ;

Cordialement Bul [mon Site] [M'écrire]

Remplacer les input par des div

1 réponse

Votre réponse

Discussions similaires