récupérer code html

**boboss123** · 17/12/2010, 11h31

rah c'est vraiment galère

Donc avec Jquery ça ferait un truc du genre :

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

**danielhagnoul** · 17/12/2010, 12h20

Bonjour

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

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

**boboss123** · 17/12/2010, 12h46

Envoyé par boboss123

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

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

Code :

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

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

=> le temps de traitement passe à 60ms

**boboss123** · 17/12/2010, 16h06

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

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
 
<!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 ?

**Bovino** · 17/12/2010, 16h19

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

**boboss123** · 17/12/2010, 16h45

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

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

**danielhagnoul** · 17/12/2010, 22h15

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 :

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

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

Un exemple plus... :

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

**boboss123** · 20/12/2010, 10h10

bonjour,

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 :

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

**boboss123** · 02/02/2011, 17h06

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

) ?

récupérer code html

jQuery

Discussions similaires

Partager

Partager