Discussion :

[boboss123]

Bonjour

si j'ai le code suivant :

Code :

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

var obj = $("<input type='checkbox' id='toto' name='toto' value='1'/>");

Comment faire pour récupérer la chaine de caractère "<input type='checkbox' id='toto' name='toto' value='1'/>" a partir de la variable obj ?

j'ai testé ça mais ça ne fonctionne pas :

Code :

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

var machaine =  $(obj).html()

merci d'avance

[SpaceFrog]

en creant une fonction outerHTML

Code :

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

1
2
3
4
5
6
$.fn.outerHTML = function() {
temp=$("<div>");
tempHTML=temp.append(this.eq(0).clone()).html();
temp.html('')
return tempHTML;
}

que tu peux utiliser comme ceci

Code :

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

1
2
  var obj = $('<input type="checkbox" id="toto" name="toto" value="1"/>');
   alert(obj.outerHTML())

[boboss123]

ok merci (j'aurais pensé que Jquery proposait ce genre de fonction)

[SpaceFrog]

A priori non, tout simplement parce que cela ne s'impose pas.
Il est extrêmement rare d'avoir besoin de l'outerHTML.

A part pour afficher le code ...

Peut on savoir à quoi va te servir la récupération du html ?

[boboss123]

C'est pour faire uine génération dynamique de tableau :

Code :

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

1
2
3
4
5
6
7
8
	tr = $("<tr id='maLigne'></tr>").appendTo(tbody);
 
	for (i=0; i<data.colNumber; i++){
		input = $("<input type='checkbox' id='checkEnb" + i + "' name='checkEnb" + i + "' value='1'/>");
		setCheckBox(input, data.tab[i]); // coche la case en fonction de la valeur passée en parametre
 
		$("<td><label>" + input.outerHTML() + " Activé</label></td>").appendTo(tr);
	}

[SpaceFrog]

inutile il suffit de passer par le html du lablel

[Bovino]

C'est pour faire uine génération dynamique de tableau :

Code :

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

1
2
3
4
5
6
7
8
	tr = $("<tr id='maLigne'></tr>").appendTo(tbody);
 
	for (i=0; i<data.colNumber; i++){
		input = $("<input type='checkbox' id='checkEnb" + i + "' name='checkEnb" + i + "' value='1'/>");
		setCheckBox(input, data.tab[i]); // coche la case en fonction de la valeur passée en parametre
 
		$("<td><label>" + input.outerHTML() + " Activé</label></td>").appendTo(tr);
	}

T'aime bien te compliquer la vie apparemment.

Code :

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

1
2
input = "<input type='checkbox' id='checkEnb" + i + "' name='checkEnb" + i + "' value='1'/>";
$("<td><label>" + input + " Activé</label></td>").appendTo(tr);

Parce que transformer une chaine en élément HTML que tu n'utilise que pour retrouver la chaine qui a permis de le créer, ça me semble un peu inutile...

[SpaceFrog]

ou encore plus simplement avec append ...

[boboss123]

T'aime bien te compliquer la vie apparemment.

C'est pas faux. c'est vrai que depuis que j'utilise JQuery, j'ai peut-etre un peu trop tendance à l'utiliser pour tout

[boboss123]

Avis aux fous de l'optimisation ...

Si je veux optimiser a fond la génération de mon tableau : quelle est la meilleur methode ?

Utiliser le DOM pour créer le tableau c'est super lent, non ?

Pour l'instant la version que je trouve la plus optimal (tout en ayant un code lisible) est :

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
 
	// *************************
	var i;
	var tmp;
 
	// construction du tableau
	var t ="<table id='tableTest'>";
		t += "<thead>";
			t += "<tr>";
				t += "<th rowspan='2'></th>";
				t += "<th colspan='" + data.ColCount + "'>Ports</th>";
			t += "</tr>";	
 
			t += "<tr>";
				for (i=0; i<data.ColCount; i++){
					t += "<th>" + data.colName[i] + "</th>";
				}
			t += "</tr>";
		t += "</thead>";
 
		t += "<tbody>";
			t += "<tr id='LineEnb'>";
				t += "<td>Ligne 1</td>";
 
				for (i=0; i<data.ColCount; i++){
					switch (parseInt(data.type[i])){
						case 0:
							t += "<td>";
 
								if(parseInt(data.tab[i][0]) == 1){
									tmp = "checked='checked'";
								} else {
									tmp = "";
								}
								t += "<input type='checkbox' id='enb" + i + "' value='1' " + tmp + "/>";
							t += "</td>";
							break;
 
						case 1:
							t += "<td>Actif</td>";
							break;
 
						default :
							t += "<td>Actif</td>";
					}
				}
 
			t += "</tr>";
 
 
			t += "<tr id='LineMode' class='tr_imp'>";
				t += "<td>Ligne 2</td>";
 
				for (i=0; i<data.ColCount; i++){
					switch (parseInt(data.type[i])){
						case (0):
							var listSelected = ["", "", "", "", ""];
							listSelected[data.tab[i][1]] = "selected='selected'";
 
							t += "<td>";
								t += "<select id='Mode" + i + "'>";
									t += "<option value='0' " + listSelected[0] + ">choix 1</option>";
									t += "<option value='1' " + listSelected[1] + ">choix 2</option>";
									t += "<option value='2' " + listSelected[2] + ">choix 3</option>";
									t += "<option value='3' " + listSelected[3] + ">choix 4</option>";
									t += "<option value='4' " + listSelected[4] + ">choix 5</option>";
								t += "</select>";
							t += "</td>";
							break;
 
						case (1):
							t += "<td>val fixe 1</td>";
							break;
 
						default :
							t += "<td>val fixe 2</td>";
					}	
				}				
 
			t += "</tr>";
		t += "</tbody>";
	t += "</table>";
 
	$("#tableTest").replaceWith(t);

=> vous voyez une meilleure methode ou des chose à optimisé (en particulier pour le selected des listbox, je n'ai pas trouvé mieux) ?

Là où je vois une optimisation encore possible, c'est sur la concaténation des chaines car pour la variable 't' on ne sait pas quel espace mémoire est réservé à sa création => donc risque de réalocation de mémoire si la réservation auto est trop petite. Existe t-il une methode pour contourner le problème ?
Est-ce qu'au moins ca servirait vraiment ?

[SpaceFrog]

aller dans les contribution js et regarder le code de creation de tableaux ...

[boboss123]

aller dans les contribution js et regarder le code de creation de tableaux ...

C'est bien de ça que vous parlez : http://javascript.developpez.com/faq...ble#AjoutLigne (je ne vois pas de section dans la partie js qui s'appèle contribution) ?
=> ça manipule le DOM : donc est-ce plus lent que ma methode ?

[SpaceFrog]

contribution != faq ...
http://www.developpez.net/forums/d47...hlight=tableau

[boboss123]

j'ai fais plusieurs tests :

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
 
var xtable=document.createElement('table');
var xtbody=document.createElement('tbody');
var xtr=document.createElement('tr');
var xtd=document.createElement('td');
var xtxt=document.createTextNode('');
 
 
function BuildTable(DestObj,NrLines,NbrCells){
	var BaliseTable=xtable.cloneNode(false);
	var BaliseTbody=xtbody.cloneNode(false);
	var texte;
	var newCell;
	var NewLine;
 
	for(i=0;i<NrLines;i++){
		NewLine=xtr.cloneNode(false);
 
		for(l=0;l<NbrCells;l++){
			//new AddCells(NewLine,i+"_"+l);
 
			texte=xtxt.cloneNode(false);
			newCell=xtd.cloneNode(false);
			//newCell.style.border="solid 1px gray";
			texte.data=i+"_"+l;
			newCell.appendChild(texte);
			NewLine.appendChild(newCell);
		}
 
		BaliseTbody.appendChild(NewLine);
	}
 
	BaliseTable.appendChild(BaliseTbody);
	$(DestObj).replaceWith(BaliseTable);
	//DestObj.appendChild(BaliseTable);
	//document.close();
}

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
function BuildTable2(DestObj,NrLines,NbrCells){
 
	var t ="<table>";
		t += "<tbody>";
			for(i=0;i<NrLines;i++){
				t += "<tr>";
					for(j=0;j<NbrCells;j++){
						t += "<td>" + i + "_" + j + "</td>";
					}
				t += "</tr>";
			}
		t += "</tbody>";	
	t += "</table>";
 
	$(DestObj).replaceWith(t);
}

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
 
function BuildTable3(DestObj,NrLines,NbrCells){
	var t = [];
 
	t.push("<table>");
		t.push("<tbody>");
			for(i=0;i<NrLines;i++){
				t.push("<tr>");
					for(j=0;j<NbrCells;j++){
						t.push("<td>" + i + "_" + j + "</td>");
					}
				t.push("</tr>");
			}
		t.push("</tbody>");	
	t.push("</table>");
 
	$(DestObj).replaceWith(t);
}

code de test :

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
 
	console.time('BuildTable');
		BuildTable($("#test"), 100, 100);
	console.timeEnd('BuildTable');
	console.time('BuildTable2');
		BuildTable2($("#test"), 100, 100);
	console.timeEnd('BuildTable2');		
	console.time('BuildTable3');
		BuildTable3($("#test"), 100, 100);
	console.timeEnd('BuildTable3');
 
	console.time('BuildTable');
		BuildTable($("#test"), 100, 100);
	console.timeEnd('BuildTable');
	console.time('BuildTable2');
		BuildTable2($("#test"), 100, 100);
	console.timeEnd('BuildTable2');		
	console.time('BuildTable3');
		BuildTable3($("#test"), 100, 100);
	console.timeEnd('BuildTable3');
 
	console.time('BuildTable');
		BuildTable($("#test"), 100, 100);
	console.timeEnd('BuildTable');
	console.time('BuildTable2');
		BuildTable2($("#test"), 100, 100);
	console.timeEnd('BuildTable2');		
	console.time('BuildTable3');
		BuildTable3($("#test"), 100, 100);
	console.timeEnd('BuildTable3');

sous firefox :

BuildTable : 79ms
BuildTable2 : 63ms
BuildTable3 : 11 ms

sous ie8 : c'est beaucoup plus long et difficile a quantifier (les temps varie) mais a priori BuildTable3 reste le plus efficace


Mais après ce qu'il faut voir, c'est est-ce qu'avec la solution BuildTable, il n'y a pas certains traitement qui facilite ensuite le traitement de l'affichage (car le DOM est construit avant de sortir de la fonction => je ne sais pas si c'est le cas avec les autres methodes ): mais ça je ne sais pas comment le mesurer (temps de traitement du script + pus affichage du tableau)

[SpaceFrog]

oui le innerHMTL est bien plus rapide, mais après pour ce qui est de l'interprétation du html inséré au pied de biche le DOM a parfois du mal...

[boboss123]

oui le innerHMTL est bien plus rapide, mais après pour ce qui est de l'interprétation du html inséré au pied de biche le DOM a parfois du mal...

Qu'est-ce que tu veux dire par là ? que des fois ça peut planter ou que c'est le traitement graphique qui risque de prendre du temps ?
=> y a t-il une methode pour mesurer le temps total réel (temps de construire son tableau + temps que le navigateur met pour l'afficher) ?

Pour BuildTable3 :

Code :

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

var t = [];

=> y a t-il moyen de définir à la création de la variable la taille de celle-ci afin d'être sure que quelque soit le navigateur utilisé, il n'y aura pas de réaffections de la mémoire pendant le processus (si ça se trouve, ça permettrait peut être d'accélérer le processus sous ie8) ?

[SpaceFrog]

Je dis juste que par exemple un objet crée par innerHTML peut poser des soucis si tu as besoin de l'utiliser ensuite avec le DOM avec certains navigateurs. C'est le cas en particulier des objets de formulaire sous IE<8.

Pour ce qui est de la réaffectation de la mémoire, bon courage ^^

[boboss123]

Je dis juste que par exemple un objet crée par innerHTML peut poser des soucis si tu as besoin de l'utiliser ensuite avec le DOM avec certains navigateurs. C'est le cas en particulier des objets de formulaire sous IE<8.

=> donc dans ce cas, il n'y a pas de questions à ce poser, le choix est imposé par la gestion de la compatibilité avec les anciennes version de IE


Mais lorsqu'on fait des truc du genre :

Code :

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

1
2
3
4
5
	Utilisation de JQuery
	var table = $("<table id='tablePort'></table>");
 
	var thead = $("<thead></thead>").appendTo(table);
	var tbody = $("<tbody></tbody>").appendTo(table);

=> on a donc le même genre de problème ?

[boboss123]

Si je lis l'intro du tuto suivant : http://kalyparker.developpez.com/art.../VOZ-partie-1/

Actuellement, JavaScript est l'un des langages de programmation les plus utilisés et les plus populaires sur internet, car une grande majorité des navigateurs sont compatibles et l'utilisent. JavaScript s'est donc rapidement répandu, car il est simple d'utilisation, précis, et possède un vaste champ d'action. La plupart des programmeurs ont eu l'habitude de croire que JavaScript était un langage futile, mais l'émergence d'AJAX sur le marché a prouvé le contraire, en nous montrant les capacités et fonctionnalités de JavaScript. Depuis cette découverte, les programmeurs peuvent créer des applications Web qui ressemblent à des applications de bureau, ce qui est très utile car les données peuvent être modifiées plus rapidement.

Cependant, l'utilisation du DOM (Document Object Model) dans les navigateurs, comme Internet Explorer, rend parfois la tâche difficile. C'est la raison pour laquelle les frameworks JavaScript fleurissent sur le marché, rendant ainsi le scripting multi-navigateurs possible. De nombreux frameworks JavaScript à la mode tels que Prototype, JQuery, YUI et Dojo ont été utilisés ces cinq dernières années par beaucoup de développeurs à travers le monde pour créer d'étonnantes applications Web. Maintenant, je vais vous apprendre pas à pas à créer un framework JavaScript, en utilisant de simples effets DOM et quelques fonctions utiles en AJAX. Nous espérons que vous pourrez utiliser ces informations et apprendre à les mettre en oeuvre par vous-même.

=> ça veut donc dire que même avec ta solution il y a des risques d'incompatibilité ?
=> il faut donc utiliser un framework comme JQuery ?

[SpaceFrog]

ça veut dire que tu n'es pas au bout de tes surprises ...