récupérer code html

Version imprimable

15/12/2010, 14h33
boboss123

récupérer code html

Bonjour

si j'ai le code suivant :

Code:

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:

var machaine = $(obj).html()

merci d'avance

en creant une fonction outerHTML

Code:

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:

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

16/12/2010, 08h57
boboss123

ok merci (j'aurais pensé que Jquery proposait ce genre de fonction)
16/12/2010, 09h01
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 ?

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

Code:

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

16/12/2010, 10h50
SpaceFrog

:roll: inutile il suffit de passer par le html du lablel

Citation:
Envoyé par boboss123
C'est pour faire uine génération dynamique de tableau :
Code:

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); }
:koi:

T'aime bien te compliquer la vie apparemment. :aie:
Code:

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...

16/12/2010, 11h42
SpaceFrog

ou encore plus simplement avec append ...
16/12/2010, 13h26
boboss123

Citation:

Envoyé par Bovino

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 :mouarf:

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:

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 ?

16/12/2010, 15h14
SpaceFrog

aller dans les contribution js et regarder le code de creation de tableaux ...
16/12/2010, 15h41
boboss123

Citation:

Envoyé par SpaceFrog

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 ?
16/12/2010, 15h58
SpaceFrog

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

j'ai fais plusieurs tests :

Code:

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:

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:

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:

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 :

Citation:

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)

16/12/2010, 19h14
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...
17/12/2010, 09h27
boboss123

Citation:

Envoyé par 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...

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:

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) ?
17/12/2010, 09h33
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 ^^
17/12/2010, 10h35
boboss123
Citation:

Envoyé par 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.

=> 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 :aie:

Mais lorsqu'on fait des truc du genre :
Code:

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 ?
17/12/2010, 10h58
boboss123

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

Citation:

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 ?
17/12/2010, 11h20
SpaceFrog

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

rah c'est vraiment galère :aie:

Donc avec Jquery ça ferait un truc du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
function BuildTable4(DestObj,NrLines,NbrCells){
	var BaliseTable = $("<table>");
	var BaliseTbody = $("<tbody>");
	var newCell;
	var NewLine;
 
	for(i=0;i<NrLines;i++){
		NewLine=$("<tr>");
 
		for(l=0;l<NbrCells;l++){
			newCell = $("<td>");
			newCell.text(i+"_"+l);
			newCell.appendTo(NewLine);
		}
 
		NewLine.appendTo(BaliseTbody);
	}
 
	BaliseTbody.appendTo(BaliseTable);
	$(DestObj).replaceWith(BaliseTable);
}

=> c'est lent et en plus lorsque je génère un tableau de 100x100 ça plante sous firefox (50x50 ça fonctionne)

Bonjour

Exemple, déjà présent sur le forum à un ou deux exemplaires !

Code:

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Manipulations d'une table</title>
	<style>
		/* BASE */
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
 
		/* TABLE */
		table.tablesorter {
			width:95%;
			margin:12px auto;
			/* table-layout = problèmes */
			empty-cells:show;
			border-collapse:collapse;
			border-spacing:0px;
			border-width:1px;
			border-style:solid;
			border-color:#666666;
			background-color:#CDCDCD;
			color:#000000;
			font-size:0.9em;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		table.tablesorter caption {
			caption-side:top;
			padding-top:6px;
			padding-bottom:6px;
			text-align:center;
			font-size:1.2em;
			font-style:oblique;
			font-weight:bold;
			line-height:normal;
			letter-spacing:0.2em;
			color:#000000;
		}
		table.tablesorter thead tr th {
			border-width:1px;
			border-style:solid;
			border-color:#999999;
			background-color: #e6eeee;
			color:#000000;
			padding:6px;
			text-align:center;
			font-size:0.9em;
			font-style:normal;
			font-weight:bold;
			line-height:1.8em;
			letter-spacing:normal;
		}
		table.tablesorter tfoot tr th {
			border-width:1px;
			border-style:solid;
			border-color:#999999;
			background-color: #e6eeee;
			color:#000000;
			padding:6px;
			text-align:left;
			font-size:0.9em;
			font-style:italic;
			font-weight:normal;
			line-height:1.4em;
			letter-spacing:normal;
		}
		table.tablesorter thead tr .header {
			background-image:url(../images/bg.gif);
			background-repeat: no-repeat;
			background-position:left;
			cursor: pointer;
		}
		table.tablesorter tbody td {
			border-width:1px;
			border-style:solid;
			border-color:#999999;
			background-color:#FFFFFF;
			color:#000000;
			vertical-align:middle;
			padding:6px;
			text-align:left;
			font-size:0.9em;
			font-style:normal;
			font-weight:normal;
			line-height:1.2em;
			letter-spacing:normal;
		}
 
		/* TEST */
	</style>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
			$("#btn").click(function(){
				var tdlength = 10,
					trlength = 10,
					array = ["<table id='maTable' class='tablesorter'>"],
					arrayHead = ["<thead><tr>"],
					arrayFoot = ["<tfoot><tr>"];
 
				for(var i = 0; i < tdlength; i++) {
					arrayHead.push("<th>head_" + i + "</th>");
				}
 
				arrayHead.push("</tr></thead>");
 
				for(var i = 0; i < tdlength; i++) {
					arrayFoot.push("<th>foot_" + i + "</th>");
				}
 
				arrayFoot.push("</tr></tfoot>");
 
				array.push(arrayHead.join(''), arrayFoot.join(''),"<tbody>");
 
					for(var j = 0; j < trlength; j++) {
						array.push("<tr>");
 
						for(var i = 0; i < tdlength; i++) {
							array.push("<td>" + j + "_" + i + "</td>");
						}
 
						array.push("</tr>");
					}
 
				array.push("</tbody></table>");
 
				$("#affiche").append(array.join(''));
 
				$("tr:even").find("td").css("background-color", "#bbbbff");
			});
 
			$("#btnLigne").click(function(){
				$("#maTable > tbody > tr:eq(3)").remove();
 
				$("tr").find("td").css("background-color", "#FFFFFF");
				$("tr:even").find("td").css("background-color", "#bbbbff");
			});
 
			$("#btnCol").toggle(
				function(){
					$("#maTable tr").each(function(i, item){
						var name = $(item).parent()[0].nodeName;
 
						if ((name == "THEAD") || (name == "TFOOT")){
							$(item).find("th:eq(3)").css("display","none");
						} else {
							$(item).find("td:eq(3)").css("display","none");
						}
					});
				},
				function(){
					$("#maTable tr").each(function(i, item){
						var name = $(item).parent()[0].nodeName;
 
						if ((name == "THEAD") || (name == "TFOOT")){
							$(item).find("th:eq(3)").css("display","block");
						} else {
							$(item).find("td:eq(3)").css("display","block");
						}
					});
				}
			);
 
		});
	</script>
</head>
<body>
	<button id="btn" type="button">Construit la table</button>
	<button id="btnLigne" type="button">Enlève la ligne n° 4 (eq(3) base 0)</button>
	<button id="btnCol" type="button">Cache ou montre la colonne n° 4 (eq(3) base 0)</button>
	<div id="affiche"></div>
</body>
</html>

Citation:

Envoyé par boboss123

Code:

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

=> oups j'ai fait une erreur, c'est :

Code:

$(DestObj).replaceWith(t.join(""));

=> le temps de traitement passe à 60ms :aie:

aussi, je suis entrain de faire des tests avec Jquery en manipulant le DOM :

Code:

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
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>test</title>
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
			//var input = $("<input/>");
 
			var input = $("<input/>")
				.attr("type", "checkbox")
				.attr("id", "enb")
				.attr("value", "1");
 
			setCheckBox(input, "1");
 
			$("#content").append(input);
 
			alert("ok");
		});
 
		function setCheckBox(obj, val){
			$(obj).attr("checked", parseInt(val));
		}
	</script>
</head>
<body>
	<div id="content"></div>
</body>
</html>

=> ça ne fonctionne pas sur IE6 et 7 (le 8 c'est OK) : la checkbox n'est pas cochée. Vous voyez de quoi ça peut venir ?

17/12/2010, 16h19
Bovino

"1" n'est pas une valeur autorisée pour un attribut checked :roll:

merci mais ça n'a pas l'air de marcher non plus si je mets checked

Code:

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>test</title>
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
//<![CDATA[ 
 
	$(document).ready(function(){
 
		var input = $("<input/>")
			.attr("type", "checkbox")
			.attr("id", "enb")
			.attr("value", "1");
 
		setCheckBox(input, "1");
 
		var div = $("<div/>").append(input);
 
		$("#content").append(div);
		alert("ok");
	});
 
	function setCheckBox(obj, val){
		if(parseInt(val) == 1){
			$(obj).attr("checked", "checked");
		}
	}
 
//]]>
	</script>
</head>
<body>
	<div id="content">chekbox : </div>
</body>
</html>

Bonsoir

Il faut conserver la même logique d'un bout à l'autre pour l'objet jQuery "input" qu'il vaudrait beaucoup mieux appelé "objInput".

Code:

obj.attr("checked", "checked"); // pas $(obj) mais obj qui est input qui est $("<input/>")

Un exemple plus... :

Code:

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="CSS-1.css">	
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<button id="btn">Check</button>
<div id="content">chekbox : </div>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
var objInput = $("<input/>", {
	"id": "enb",
	"type": "checkbox",
	"value": "1"
}).appendTo("#content").wrap('<div/>');
 
function setCheckBox(obj, val){
	if(parseInt(val) == 1){
		obj.attr("checked", "checked");
	}
}
 
$("#btn").click(function(){
	setCheckBox(objInput, 1);
});
 
		});
 	</script>
</body>  
</html>

bonjour,

Citation:

Envoyé par danielhagnoul

Il faut conserver la même logique d'un bout à l'autre pour l'objet jQuery "input" qu'il vaudrait beaucoup mieux appelé "objInput".

=> ok

Je crois avoir trouvé d'où venait le problème. Pour IE<8, il faut cocher la checkbox qu'après l'avoir affecté dans la page html : si on le fait avant, ce n'est pas pris en compte.
Par contre pour les listbox, il n'y a pas ce problème.
=> Donc même en travaillant uniquement sur le DOM, il peut y avoir des problèmes.
Code:

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 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>test</title> <script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script> //<![CDATA[ $(document).ready(function(){ var objInput = $("<input/>", { "type" : "checkbox", "id" : "enb", "value" : "1" }); var objSelect = $("<select/>", {"id" : "list"}); $("<option/>", {"value" : "0"}) .text("0") .appendTo(objSelect); $("<option/>", {"value" : "1"}) .text("1") .appendTo(objSelect); var div = $("<div/>") .append(objInput) .append(objSelect); setListBox(objSelect, "1"); $("#content").append(div); setCheckBox(objInput, "1"); }); function setCheckBox(obj, val){ if(parseInt(val) == 1){ obj.attr("checked", "checked"); } } function setListBox(obj, val){ obj.val(parseInt(val)); } //]]> </script> </head> <body> <div id="content">chekbox : </div> </body> </html>

02/02/2011, 17h06
boboss123

Citation:

Envoyé par boboss123

Je crois avoir trouvé d'où venait le problème. Pour IE<8, il faut cocher la checkbox qu'après l'avoir affecté dans la page html : si on le fait avant, ce n'est pas pris en compte.

Bonjour,

Bien qu'ayant trouvé une solution, je voudrais être sur qu'il n'en existe pas une autre => n'y a t-il vraiment pas moyen d'affecter la valeur à la checkbox pendant son ajout dans la DOM (car mettre en pratique ce système pose de grosses contraintes :aie:) ?