Remplissage + Comparaison tableau Javascript

Invité · 05/09/2017, 17h17

Bonjour à tous , un pote m'a donné son code qu'il a laissé tomber il y a plusieurs années qui sert de comparatif de statistiques d'armes sur un jeu en ligne gratuit . j'aimerais bien l'améliorer un peu pour un nouveau jeu mais le javascript et moi ça fait 2

J'ai précédemment été aidé par NoSmoking et SpaceFrog sur la façon de trier les données dans une liste déroulantes , chose faite je crée donc ce nouveau topic pour que vous puissiez m'aider à remplir le tableau en HTML et comparer les statistiques des différentes armes .

Ce que je désire faire c'est comparer 2 armes à la fois comme ceci :

J'ai essayé de créer un tableau comme ceci mais aucune idée de si c'est vraiment bon et optimale :

https://jsfiddle.net/7c52m81p/

L'ancien code si ça peut aider :

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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
<!--
 
MultiArray = new Array(60)
 
MultiArray [1] = new Array(9)
MultiArray [1][0] = "arx160"
MultiArray [1][1] = 89
MultiArray [1][2] = 27
MultiArray [1][3] = 61
MultiArray [1][4] = 81
MultiArray [1][5] = 92
MultiArray [1][6] = "arx160.png"
MultiArray [1][7] = 83
MultiArray [1][8] = 35
 
MultiArray [2] = new Array(9)
MultiArray [2][0] = "tar21"
MultiArray [2][1] = 89
MultiArray [2][2] = 27
MultiArray [2][3] = 61
MultiArray [2][4] = 81
MultiArray [2][5] = 92
MultiArray [2][6] = "tar21.png"
MultiArray [2][7] = 83
MultiArray [2][8] = 35
 
MultiArray [3] = new Array(9)
MultiArray [3][0] = "g36gl"
MultiArray [3][1] = 89
MultiArray [3][2] = 27
MultiArray [3][3] = 61
MultiArray [3][4] = 81
MultiArray [3][5] = 92
MultiArray [3][6] = "g36gl.png"
MultiArray [3][7] = 83
MultiArray [3][8] = 35
 
MultiArray [4] = new Array(9)
MultiArray [4][0] = "CZ 805 A2"
MultiArray [4][1] = 80
MultiArray [4][2] = 33
MultiArray [4][3] = 61
MultiArray [4][4] = 71
MultiArray [4][5] = 84
MultiArray [4][6] = "cz805a2.png"
MultiArray [4][7] = 83
MultiArray [4][8] = 35
 
 
MultiArray [5] = new Array(9)
 
 
// valeur max tableau , ajouter une ligne en +
var array_max_val=5;
// 
 
function go()
{
var x;
var y;
 
 
x=document.George.wep1.options[document.George.wep1.selectedIndex].value;
y=document.George.wep2.options[document.George.wep2.selectedIndex].value;
 
var i=0;
 
 
for (i=1;i<=array_max_val;i++)
{
 
 if (MultiArray [i][0] == x )
     {
      t_weap1=MultiArray [i][0];
      t_dmg1=MultiArray [i][1];
      t_prt1=MultiArray [i][2];
      t_frt1=MultiArray [i][3];
      t_acc1=MultiArray [i][4];
      t_rec1=MultiArray [i][5];
      t_pic1=MultiArray [i][6];
      t_mag1=MultiArray [i][7];
      t_cap1=MultiArray [i][8];
     }
 
 if (MultiArray [i][0] == y )
     {
      t_weap2=MultiArray [i][0];
      t_dmg2=MultiArray [i][1];
      t_prt2=MultiArray [i][2];
      t_frt2=MultiArray [i][3];
      t_acc2=MultiArray [i][4];
      t_rec2=MultiArray [i][5];
      t_pic2=MultiArray [i][6];
      t_mag2=MultiArray [i][7];
      t_cap2=MultiArray [i][8];
     }    
 
} //end for
 
addRow(t_weap1,t_dmg1,t_prt1,t_frt1,t_acc1,t_rec1,t_pic1,t_mag1,t_cap1,t_weap2,t_dmg2,t_prt2,t_frt2,t_acc2,t_rec2,t_pic2,t_mag2,t_cap2);
 
 
}
 
function load()
{
 
fillcombo();
}
 
function fillcombo()
{
//var i=0;
 
    document.George.wep1.options.length = 0;
    document.George.wep2.options.length = 0;
 
//array_max_val // affichage option list
      for(var i=1; i < array_max_val; i++) {
 
      addOption(document.George.wep1,MultiArray [i][0],MultiArray [i][0])
      addOption(document.George.wep2,MultiArray [i][0],MultiArray [i][0])
                                }
 
 
 
 
}
 
 
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
 
optn.value = value;
selectbox.options.add(optn);
}
 
 
// added mag1 and mag2,cap1 and cap2 - used for weapon magazine
function addRow(weap1,acc1,dmg1,prt1,frt1,rec1,pic1,mag1,cap1,weap2,acc2,dmg2,prt2,frt2,rec2,pic2,mag2,cap2)
{
 
 
 
 greencolor="#16B84E";
 redcolor="#FF0000";
 bluecolor="#0000FF";
 
 
 if (!document.getElementsByTagName) return;
         tabBody=document.getElementsByTagName("TBODY").item(0);
 
 
         while(tabBody.rows.length>0) 
         tabBody.deleteRow(tabBody.rows.length-1); 
 
 
 
         row=document.createElement("TR");
         row1=document.createElement("TR");
         row2=document.createElement("TR");
         row3=document.createElement("TR");
         row4=document.createElement("TR");
         row5=document.createElement("TR");
         row6=document.createElement("TR");
         //row7 is used for magazine stats
         row7=document.createElement("TR");
         //row8 is used for mag capacity
         row8=document.createElement("TR");
 
         cell_accuracy = document.createElement("TD");
         cell_acc1 = document.createElement("TD");
         cell_acc2 = document.createElement("TD");
         cell_stats_accuracy = document.createElement("TD");
         cell_name = document.createElement("TD");
         cell_weap1 = document.createElement("TD");
         cell_weap2 = document.createElement("TD");
         cell_stats_weap = document.createElement("TD");
         cell_img = document.createElement("TD");
         cell_img1 = document.createElement("TD");
         cell_img2 = document.createElement("TD");
         cell_stats_image = document.createElement("TD");
         cell_damage = document.createElement("TD");
         cell_dmg1 = document.createElement("TD");
         cell_dmg2 = document.createElement("TD");
         cell_stats_damage = document.createElement("TD");
         cell_portability = document.createElement("TD");
         cell_prt1 = document.createElement("TD");
         cell_prt2 = document.createElement("TD");
         cell_stats_portability = document.createElement("TD");
         cell_fire_rate = document.createElement("TD");
         cell_frt1 = document.createElement("TD");
         cell_frt2 = document.createElement("TD");
         cell_stats_fire_rate = document.createElement("TD");
         cell_recoil = document.createElement("TD");
         cell_rec1 = document.createElement("TD");
         cell_rec2 = document.createElement("TD");
         cell_stats_recoil = document.createElement("TD");
         // added cell_mag1 and cell_mag2 - used for weapon magazine
         cell_magazine = document.createElement("TD");
         cell_mag1 = document.createElement("TD");
         cell_mag2 = document.createElement("TD");
         cell_stats_magazine = document.createElement("TD");
         // added cell_cap1 and cell_cap2 - used for weapon magazine capacity
         cell_capacity = document.createElement("TD");
         cell_cap1 = document.createElement("TD");
         cell_cap2 = document.createElement("TD");
         cell_stats_capacity = document.createElement("TD");
 
 
 
         textnode_name=document.createTextNode("Weapon");
         textnode_weap1=document.createTextNode(weap1);
         textnode_weap2=document.createTextNode(weap2);
         textnode_img=document.createTextNode("Image");
 
//load the image here         
         pic1="images/"+pic1;
         var textnode_img1=document.createElement("img");
             textnode_img1.setAttribute('src', pic1);
             textnode_img1.setAttribute('alt', 'na');
             textnode_img1.setAttribute('height', '155px');
             textnode_img1.setAttribute('width', '490px');
 
 
 
 
 
 
         pic2="images/"+pic2;
         var textnode_img2=document.createElement("img");
             textnode_img2.setAttribute('src', pic2);
             textnode_img2.setAttribute('alt', 'na');
             textnode_img2.setAttribute('height', '155px');
             textnode_img2.setAttribute('width', '490px');
 
 
 
 
//END load the image here         
 
         textnode_accuracy=document.createTextNode("Accuracy");
         textnode_acc1=document.createTextNode(acc1);
         textnode_acc2=document.createTextNode(acc2);
         textnode_damage=document.createTextNode("Power");
         textnode_dmg1=document.createTextNode(dmg1);
         textnode_dmg2=document.createTextNode(dmg2);
         textnode_portability=document.createTextNode("Range");
         textnode_prt1=document.createTextNode(prt1);
         textnode_prt2=document.createTextNode(prt2);
         textnode_fire_rate=document.createTextNode("Rate of Fire");
         textnode_frt1=document.createTextNode(frt1);
         textnode_frt2=document.createTextNode(frt2);
 
         textnode_recoil=document.createTextNode("Stability");
         textnode_rec1=document.createTextNode(rec1);
         textnode_rec2=document.createTextNode(rec2);
 
         //2012-10-17 added textnode_mag1 and textnode_mag2 - used for weapon magazine
         textnode_magazine=document.createTextNode("Mobility");
         textnode_mag1=document.createTextNode(mag1);
         textnode_mag2=document.createTextNode(mag2);
         //2012-10-17 added textnode_cap1 and textnode_cap2 - used for weapon magazine capacity
         textnode_capacity=document.createTextNode("Clip Size");
         textnode_cap1=document.createTextNode(cap1);
         textnode_cap2=document.createTextNode(cap2);
 
 
 
         cell_name.appendChild(textnode_name);
			   cell_weap1.appendChild(textnode_weap1);
			   cell_weap2.appendChild(textnode_weap2);
 
			   textnode_stats_weap=document.createTextNode("Points");
			   cell_stats_weap.appendChild(textnode_stats_weap);
         row.appendChild(cell_name);
         row.appendChild(cell_weap1);
         row.appendChild(cell_weap2);
         row.appendChild(cell_stats_weap);
         tabBody.appendChild(row);
 
 
////////////////////////////////////////////////////////////////         
         cell_img.appendChild(textnode_img);
			   cell_img1.appendChild(textnode_img1);
			   cell_img2.appendChild(textnode_img2);
 
			   textnode_img=document.createTextNode("	");
			   cell_stats_image.appendChild(textnode_img);
 
			   row1.appendChild(cell_img);
         row1.appendChild(cell_img1);
         row1.appendChild(cell_img2);
         row1.appendChild(cell_stats_image);
 
         tabBody.appendChild(row1);
 
 
 
////////////////////////////////////////////////////////////////         
                  cell_accuracy.appendChild(textnode_accuracy);
         cell_accuracy.style.textAlign="left";
			   cell_acc1.appendChild(textnode_acc1);
			   cell_acc2.appendChild(textnode_acc2);
 
 
         //if statement
         if (acc1 > acc2)
  				{
  				 x=acc1-acc2;
  				 textnode_stats_accuracy=document.createTextNode(x);
  				 cell_stats_accuracy.appendChild(textnode_stats_accuracy);
  				 cell_stats_accuracy.style.color =greencolor;
  				 cell_stats_accuracy.style.fontWeight = 'bold';
  				}
  				else
  				{
 
  				if (acc1 == acc2)
  				  {  				
  				 textnode_stats_accuracy=document.createTextNode("0");
  				 cell_stats_accuracy.appendChild(textnode_stats_accuracy);
  				 cell_stats_accuracy.style.color =bluecolor;
  				 cell_stats_accuracy.style.fontWeight = 'bold';
  				   }
  				else
  				  {
  				   x=acc2-acc1;
  				   textnode_stats_accuracy=document.createTextNode(-x);
  				   cell_stats_accuracy.appendChild(textnode_stats_accuracy);
  				   cell_stats_accuracy.style.color=redcolor;
  				   cell_stats_accuracy.style.fontWeight = 'bold';
  			  	}
			   }    			   
 
 
 
         row5.appendChild(cell_accuracy);
         row5.appendChild(cell_acc1);
         row5.appendChild(cell_acc2);
         row5.appendChild(cell_stats_accuracy);
         tabBody.appendChild(row5);
 
		 //////////////////////////////////////////////////////////////// 
 
         cell_damage.appendChild(textnode_damage);
         cell_damage.style.textAlign="left";
 
 
			   cell_dmg1.appendChild(textnode_dmg1);
			   cell_dmg2.appendChild(textnode_dmg2);
 
		//check weapon stats	   
			    if (dmg1 > dmg2)
  				{
  				 x=dmg1-dmg2;
  				 textnode_stats_damage=document.createTextNode(x);
  				 cell_stats_damage.appendChild(textnode_stats_damage);
  				 cell_stats_damage.style.color=greencolor;
 
  				 cell_stats_damage.style.fontWeight = 'bold';
  				}
 
  				if (dmg1 == dmg2)
  				  {  				
  				 textnode_stats_damage=document.createTextNode("0");
  				 cell_stats_damage.appendChild(textnode_stats_damage);
  				 cell_stats_damage.style.color=bluecolor;
 
  				 cell_stats_damage.style.fontWeight = 'bold';
  				}
 
  				 if (dmg1 < dmg2)
  				{
  				 x=dmg2-dmg1;
  				 textnode_stats_damage=document.createTextNode(-x);
  				 cell_stats_damage.appendChild(textnode_stats_damage);
  				 cell_stats_damage.style.color=redcolor;
 
  				 cell_stats_damage.style.fontWeight = 'bold';
  				}
 
 
         row2.appendChild(cell_damage);
         row2.appendChild(cell_dmg1);
         row2.appendChild(cell_dmg2);
         row2.appendChild(cell_stats_damage);
         tabBody.appendChild(row2);
 
 
         ///////////////////////////////////////////////////////////////////////////////////////////////////
 
		  cell_portability.appendChild(textnode_portability);
         cell_portability.style.textAlign="left";
			   cell_prt1.appendChild(textnode_prt1);
			   cell_prt2.appendChild(textnode_prt2);
 
//if statement
         if (prt1 > prt2)
  				{
  				 x=prt1-prt2;
  				 textnode_stats_portbility=document.createTextNode(x);
  				 cell_stats_portability.appendChild(textnode_stats_portbility);
  				 cell_stats_portability.style.color =greencolor;
  				 cell_stats_portability.style.fontWeight = 'bold';
 
  				}
  				else
  				{
 
  				if (prt1 == prt2)
  				  {  				
  				 textnode_stats_portbility=document.createTextNode("0");
  				 cell_stats_portability.appendChild(textnode_stats_portbility);
  				 cell_stats_portability.style.color =bluecolor;
  				 cell_stats_portability.style.fontWeight = 'bold';
  				   }
  				else
  				{
  				 x=prt2-prt1;
  				 textnode_stats_portbility=document.createTextNode(-x);
  				 cell_stats_portability.appendChild(textnode_stats_portbility);
  				 cell_stats_portability.style.color =redcolor;
  				 cell_stats_portability.style.fontWeight = 'bold';
  				}
			   }    			   
 
         row3.appendChild(cell_portability);
         row3.appendChild(cell_prt1);
         row3.appendChild(cell_prt2);
         row3.appendChild(cell_stats_portability);
         tabBody.appendChild(row3);
 
 
 
 
 
		 /////////////////////////////////////////////////////////////////////////////////
 
 
 
 
         cell_fire_rate.appendChild(textnode_fire_rate);
         cell_fire_rate.style.textAlign="left";
			   cell_frt1.appendChild(textnode_frt1);
			   cell_frt2.appendChild(textnode_frt2);
 
 
			   //if statement
         if (frt1 > frt2)
  				{
  				 x=frt1-frt2;
  				 textnode_stats_fire_rate=document.createTextNode(x);
  				 cell_stats_fire_rate.appendChild(textnode_stats_fire_rate);
  				 cell_stats_fire_rate.style.color =greencolor;
  				 cell_stats_fire_rate.style.fontWeight = 'bold';
  				}
  				else
  				{
 
  				if (frt1 == frt2)
  				  {  				
  				 textnode_stats_fire_rate=document.createTextNode("0");
  				 cell_stats_fire_rate.appendChild(textnode_stats_fire_rate);
  				 cell_stats_fire_rate.style.color =bluecolor;
  				 cell_stats_fire_rate.style.fontWeight = 'bold';
  				   }
  				else
  				  {
  				   x=frt2-frt1;
  				   textnode_stats_fire_rate=document.createTextNode(-x);
  				   cell_stats_fire_rate.appendChild(textnode_stats_fire_rate);
  				   cell_stats_fire_rate.style.color =redcolor;
  				   cell_stats_fire_rate.style.fontWeight = 'bold';
  			  	}
			   }    			   
 
 
 
         row4.appendChild(cell_fire_rate);
         row4.appendChild(cell_frt1);
         row4.appendChild(cell_frt2);
         row4.appendChild(cell_stats_fire_rate);
         tabBody.appendChild(row4);
 
 
 
         cell_recoil.appendChild(textnode_recoil);
         cell_recoil.style.textAlign="left";
			   cell_rec1.appendChild(textnode_rec1);
			   cell_rec2.appendChild(textnode_rec2);
 
          //if statement
         if (rec1 > rec2)
  				{
  				 x=rec1-rec2;
  				 textnode_stats_recoil=document.createTextNode(x);
  				 cell_stats_recoil.appendChild(textnode_stats_recoil);
  				 cell_stats_recoil.style.color  = greencolor;
  				 cell_stats_recoil.style.fontWeight = 'bold';
  				}
  				else
  				{
 
  				if (rec1 == rec2)
  				  {  				
  				 textnode_stats_recoil=document.createTextNode("0");
  				 cell_stats_recoil.appendChild(textnode_stats_recoil);
  				 cell_stats_recoil.style.color =bluecolor;
  				 cell_stats_recoil.style.fontWeight = 'bold';
  				   }
  				else
  				  {
  				   x=rec1-rec2;
  				   textnode_stats_recoil=document.createTextNode(x);
  				   cell_stats_recoil.appendChild(textnode_stats_recoil);
  				   cell_stats_recoil.style.color =redcolor;
  				   cell_stats_recoil.style.fontWeight = 'bold';
  			  	}
			   }    			   
 
 
 
 
         row6.appendChild(cell_recoil);
         row6.appendChild(cell_rec1);
         row6.appendChild(cell_rec2);
         row6.appendChild(cell_stats_recoil);
         tabBody.appendChild(row6);
 
 
 
// added magazine1 and 2  - used for weapon magazine
 
         if (mag1 > mag2)
  				{
  				 x=mag1-mag2;
  				 textnode_stats_magazine=document.createTextNode(x);
  				 cell_stats_magazine.appendChild(textnode_stats_magazine);
  				 cell_stats_magazine.style.color =greencolor;
  				 cell_stats_magazine.style.fontWeight = 'bold';
  				}
  				else
  				{
 
  				if (mag1 == mag2)
  				  {  				
  				 textnode_stats_magazine=document.createTextNode("0");
  				 cell_stats_magazine.appendChild(textnode_stats_magazine);
  				 cell_stats_magazine.style.color =bluecolor;
  				 cell_stats_magazine.style.fontWeight = 'bold';
  				   }
  				else
  				  {
  				   x=mag2-mag1;
  				   textnode_stats_magazine=document.createTextNode(-x);
  				   cell_stats_magazine.appendChild(textnode_stats_magazine);
  				   cell_stats_magazine.style.color=redcolor;
  				   cell_stats_magazine.style.fontWeight = 'bold';
  			  	}
			   }    			   
 
 
 
         row7.appendChild(cell_magazine);
         row7.appendChild(cell_mag1);
         row7.appendChild(cell_mag2);
         row7.appendChild(cell_stats_magazine);
         tabBody.appendChild(row7);
 
         cell_magazine.appendChild(textnode_magazine);
         cell_magazine.style.textAlign="left";
			   cell_mag1.appendChild(textnode_mag1);
			   cell_mag2.appendChild(textnode_mag2);
 
// end added magazine1 and 2  - used for weapon magazine       
 
 
 
//added Capacity and 2  - used for weapon magazine capacity
 
         if (cap1 > cap2)
  				{
  				 x=cap1-cap2;
  				 textnode_stats_capacity=document.createTextNode(x);
  				 cell_stats_capacity.appendChild(textnode_stats_capacity);
  				 cell_stats_capacity.style.color =greencolor;
  				 cell_stats_capacity.style.fontWeight = 'bold';
  				}
  				else
  				{
 
  				if (cap1 == cap2)
  				  {  				
  				 textnode_stats_capacity=document.createTextNode("0");
  				 cell_stats_capacity.appendChild(textnode_stats_capacity);
  				 cell_stats_capacity.style.color =bluecolor;
  				 cell_stats_capacity.style.fontWeight = 'bold';
  				   }
  				else
  				  {
  				   x=cap2-cap1;
  				   textnode_stats_capacity=document.createTextNode(-x);
  				   cell_stats_capacity.appendChild(textnode_stats_capacity);
  				   cell_stats_capacity.style.color=redcolor;
  				   cell_stats_capacity.style.fontWeight = 'bold';
  			  	}
			   }    			   
 
 
 
         row8.appendChild(cell_capacity);
         row8.appendChild(cell_cap1);
         row8.appendChild(cell_cap2);
         row8.appendChild(cell_stats_capacity);
         tabBody.appendChild(row8);
 
         cell_capacity.appendChild(textnode_capacity);
         cell_capacity.style.textAlign="left";
			   cell_cap1.appendChild(textnode_cap1);
			   cell_cap2.appendChild(textnode_cap2);
 
//end added Capacity and 2  - used for weapon magazine capacity
 
 
}
 
function makeTable()
{
//addRow(MultiArray[2][0],MultiArray[2][1],MultiArray[2][2],MultiArray[2][3],MultiArray[2][4],MultiArray[2][5],MultiArray[1][0],MultiArray[1][1],MultiArray[1][2],MultiArray[1][3],MultiArray[1][4],MultiArray[1][5]);
addRow(MultiArray[2][0],MultiArray[2][1],MultiArray[2][2],MultiArray[2][3],MultiArray[2][4],MultiArray[2][5],MultiArray[2][6],MultiArray[2][7],MultiArray[1][0],MultiArray[1][1],MultiArray[1][2],MultiArray[1][3],MultiArray[1][4],MultiArray[1][5],MultiArray[1][6],MultiArray[1][7]);
}
 
 
 
//-->

Pourriez-vous me montrer comment procéder au remplissage des noms des armes / images et Accuracy avec comparaison dans un tableau ? Après je suppose que le code est le même pour le reste des statistiques ?

Merci d'avance ! Astobelix

**NoSmoking** · 05/09/2017, 18h34

Bonjour sur cette discussion !

La première question que je vais te poser avant d'aller plus loin est : pourquoi vouloir créer la <table> plutôt que de la mettre en « dur » dans la page ?

Invité · 05/09/2017, 19h53

Bonsoir NoSmoking , alors pour être franc je n'y ai pas pensé ( si par en " dur " tu veux dire dessiner le tableau en HTML direct ? )

Je suppose que si tu me poses la question c'est que le développement en sera que plus facile ?

Edit : si jamais c'est vraiment ça , j'ai fait le tableau en HTML :

https://jsfiddle.net/17Lh1nr9/

**NoSmoking** · 05/09/2017, 22h19

Développement plus facile pas forcément mais j'ai toujours trouvé que construire une <table> était très verbeux et pas toujours opportun ce qui est au vue de ton code le cas

Il suffit de poser au départ que :

colonne 0 : les libellées, on n'y touche pas
colonne 1 : les données de l'arme, suivant sélection 1, donc à remplir
colonne 2 : les données de l'arme, suivant sélection 2, donc à remplir
colonne 3 : les écarts de « performance » des armes, donc à calculer

Concernant les données à afficher, l'ordre n'est pas celui dans lequel elles apparaissent dans l'array. Peut être qu'un autre structure de données aurait été préférable mais bon on va faire avec.
L'ordre d'affichage sera donc, si je n'ai pas fait d'erreur :

Code :

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

var ordre = [0,6,1,2,3,4,5,7,8];    // ordre d'affichage des données dans le tableau

Pour le <select> #1 il suffit de cibler la colonne 1 et pour le <select> #2 la colonne 2 et les remplir ligne par ligne, c'est aussi trivial que cela.

La fonction pourrait ressembler à cela :

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
/**
 * Fonction de remplissage d'une colonne du tableau
 * @param   {Number} col - colonne concernée par le remplissage
 * @param   {Number} ind - index dans le tableau de données
 */
function showDetail(col, ind) {
  var oDest = document.querySelector('#compare');   // récup. de la table ayant pour id=compare
  var ordre = [0,6,1,2,3,4,5,7,8];                  // ordre d'affichage des données dans le tableau
  var oRows = oDest.rows;                           // get collection des lignes
  var indArme = ind > 0 ? ind - 1 : null;           // récup. index des données à traiter
  var arme = MultiArray[indArme];                   // pointe les données à afficher
  var i;                                            // variable de boucle  
  var nb = ordre.length;
 
  for (i = 0; i < nb; i += 1) {
    if( ordre[i] !== 6){
      oRows[i].cells[col].textContent = arme ? arme[ordre[i]] : '';
    }
    else {
      oRows[i].cells[col].innerHTML = arme ? '<img src="' +arme[ordre[i]] +'">' : '';
    }
  }
  // rempli la dernière colonne
  calculEcart();
}

Cette fonction est à appeler sur le onchange des <select> en passant en argument la colonne concernée et l'index des données à traiter.

Nota: dans le remplissage il est donc plus intéressant de mettre l'index des données dans le tableau de données dans la value des options.

La fonction addOption devient dans ce cas :

Code :

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

1
2
3
4
5
6
7
8
9
10
function addOption(id_dest, data) {
  var oDest = document.querySelector('#' + id_dest);
  var option;
  var i;
  var nb = data.length;
  for (i = 0; i < nb; i += 1) {
    option = new Option(data[i][0], i + 1); // on change -> data[i][0] en i + 1    
    oDest.add(option);
  }
}

L'appel de la fonction de mise à jour pouvant se faire de la façon suivante dans le code HTML, pour faire simple.

Code html :

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

1
2
3
4
5
6
<select id="arme_1" onchange="showDetail(1, this.value);">
    <option>Choix</option>
</select>
<select id="arme_2" onchange="showDetail(2, this.value);">
    <option>Choix</option>
</select>

Pour terminer cette partie, on remarquera qu'en fin de fonction showDetail la fonction calculEcart est appelée, je te laisse y réfléchir.

Invité · 05/09/2017, 23h40

Merci NoSmoking !

Alors j'ai essayé de mettre en forme le code , donc je laisse le tableau HTML et je garde juste la première colonne c'est bien ça ?

Mais ça n'a pas l'air de remplir le tableau , je voix que tu parle de col et ind à paramétrer , le problème vient de là ?

Voici la mise en forme :

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Construction dynamique</title>
<style>
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
 
<body>
<select id="arme_1" onchange="showDetail(1, this.value);">
    <option>Choix</option>
</select>
<select id="arme_2" onchange="showDetail(2, this.value);">
    <option>Choix</option>
</select>
<script>
MultiArray = [];
 
MultiArray.push( ["arx160",     89, 27, 61, 81, 92, "arx160.png",   83, 35]);
MultiArray.push( ["tar21",      89, 27, 61, 81, 92, "tar21.png",    83, 35]);
MultiArray.push( ["g36gl",      89, 27, 61, 81, 92, "g36gl.png",    83, 35]);
MultiArray.push( ["CZ 805 A2",  80, 33, 61, 71, 84, "cz805a2.png",  83, 35]);
 
function fctSort(a, b) {
  return (a[0].toUpperCase() > b[0].toUpperCase()) ? 1 : - 1;
}
 
/**
 * Fonction de remplissage d'une colonne du tableau
 * @param   {Number} col - colonne concernée par le remplissage
 * @param   {Number} ind - index dans le tableau de données
 */
function showDetail(col, ind) {
  var oDest = document.querySelector('#compare');   // récup. de la table ayant pour id=compare
  var ordre = [0,6,1,2,3,4,5,7,8];                  // ordre d'affichage des données dans le tableau
  var oRows = oDest.rows;                           // get collection des lignes
  var indArme = ind > 0 ? ind - 1 : null;           // récup. index des données à traiter
  var arme = MultiArray[indArme];                   // pointe les données à afficher
  var i;                                            // variable de boucle  
  var nb = ordre.length;
 
  for (i = 0; i < nb; i += 1) {
    if( ordre[i] !== 6){
      oRows[i].cells[col].textContent = arme ? arme[ordre[i]] : '';
    }
    else {
      oRows[i].cells[col].innerHTML = arme ? '<img src="' +arme[ordre[i]] +'">' : '';
    }
  }
  // rempli la dernière colonne
  calculEcart();
}
 
// fonction addOption
function addOption(id_dest, data) {
  var oDest = document.querySelector('#' + id_dest);
  var option;
  var i;
  var nb = data.length;
  for (i = 0; i < nb; i += 1) {
    option = new Option(data[i][0], i + 1); // on change -> data[i][0] en i + 1    
    oDest.add(option);
  }
}
// tri des données
MultiArray.sort(fctSort);
// remplissage <select>
addOption('arme_1', MultiArray);
addOption('arme_2', MultiArray);
 
//-->
 
</script>
 
 
<!--Début création tableau-->
 
<table>
   <tr>
       <th>Weapons</th>
       <td> </td>
       <td> </td>
       <td> Points</td>
   </tr>
   <tr>
       <th>Image</th>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <th>Accuracy</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Power</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Range</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Rate of fire</th>
       <td>  </td>
       <td> </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Stability</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Mobility</th>
       <td> </td>
       <td>  </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Clip Size</th>
       <td>  </td>
       <td>  </td>
	   <td> </td>
   </tr>
</table>
 
<!--Fin du tableau-->
 
 
</body>
</html>

https://jsfiddle.net/epc86mdb/

Merci d'avance !

**NoSmoking** · 06/09/2017, 18h10

Tout est dans ces llignes
coté javascript

Code :

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

var oDest = document.querySelector('#compare');   // récup. de la table ayant pour id=compare

coté HTML

Code html :

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

<table>

Il ne manquerait pas quelque chose dans cette balise ?

Invité · 06/09/2017, 18h32

Salut ! Alors la rectification à faire c'est ceci ? :

Code :

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

<table id='#compare'>

mais là ça ne remplit pas le tableau

**NoSmoking** · 06/09/2017, 18h37

lis-tu ce qui est écrit ?

Envoyé par Commentaire du code

// récup. de la table ayant pour id=compare

Invité · 06/09/2017, 19h18

Oh mince , en effet j'ai mal lu

, j'ai enlevé le # et là ça fonctionne !

Je suis conscient que pour vous c'est des choses simples mais comme je l'ai dit sur mon autre sujet je n'y connais rien du tout ( j'essaye d'apprendre au fur et à mesure

)

Donc prochaine étape et je pense que c'est super compliqué pour la fonction comparaison ...

En gros je pense qu'il faut quelque chose du genre :

pour l'accuracy :

Si acc1 > acc 2 faire acc1 - acc2 -> afficher dans colonne 3 ligne 2 le résultat " + la valeur " en vert
Sinon
Si acc1 == acc2 afficher dans colonne 3 ligne 2 le résultat "0" en bleu
Sinon acc2 - acc1 et afficher dans colonne 3 ligne 2 le résultat " - la valeur " en rouge

J'ai ça en tête mais aucune idée de comment transposer ça pour le rendre tout cela fonctionnel !

**NoSmoking** · 07/09/2017, 19h22

En gros je pense qu'il faut quelque chose du genre : ...

tu es sur la bonne voie.

POUR TOUTES les Lignes concernées FAIRE
  // récup. des valeurs
  valeur_A = Valeur Cellule [1] de la Ligne[enCours]
  valeur_B = Valeur Cellule [2] de la Ligne[enCours]
  ecart = valeur_A – valeur_B
  
  // défini couleur suivant valeur ecart
  SI ecart EGAL à 0 ALORS
    classCellule= « bleu »
  FIN SI
  
  SI ecart SUP à 0 ALORS
    classCellule= « vert »
  FIN SI
  
  SI ecart INF à 0 ALORS
    classCellule= « rouge »
  FIN SI
  
  // affectation valeur et couleur
  Valeur Cellule [3] de la Ligne[EnCours] = ecart
  Style Cellule [3] de la Ligne[EnCours] = classCellule
FIN POUR

Tu as tout ce qu'il te faut pour transformer cela en code exploitable.

Invité · 07/09/2017, 22h10

Salut , merci ça fait plaisir de voir que le raisonnement est plus ou moins bon !

Mais là je suis en grande détresse , cela fait 2 heures que j'essaye de comprendre à transposer tout ça en code mais je n'y arrive pas

mon code ne ressemble à rien et ne me donne aucun résultat , j'ai essayé de prendre un peu sur l'ancien code et je me mélange les pinceaux , grand désespoir

là le code ressemble à ça et je suppose que c'est archi nul ...

Code html :

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
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Construction dynamique</title>
<style>
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
        text-align:center; 
    vertical-align:middle;
        width:400px;
}
</style>
</head>
 
<body>
<select id="arme_1" onchange="showDetail(1, this.value);">
    <option>Choix</option>
</select>
<select id="arme_2" onchange="showDetail(2, this.value);">
    <option>Choix</option>
</select>
<BR><BR>
<script>
MultiArray = [];
 
MultiArray.push( ["arx160",     89, 27, 61, 81, 92, "arx160.png",   83, 35]);
MultiArray.push( ["tar21",      89, 27, 61, 81, 92, "tar21.png",    83, 35]);
MultiArray.push( ["g36gl",      89, 27, 61, 81, 92, "g36gl.png",    83, 35]);
MultiArray.push( ["CZ 805 A2",  80, 33, 61, 71, 84, "cz805a2.png",  83, 35]);
 
function fctSort(a, b) {
  return (a[0].toUpperCase() > b[0].toUpperCase()) ? 1 : - 1;
}
 
/**
 * Fonction de remplissage d'une colonne du tableau
 * @param   {Number} col - colonne concernée par le remplissage
 * @param   {Number} ind - index dans le tableau de données
 */
function showDetail(col, ind) {
  var oDest = document.querySelector('#compare');   // récup. de la table ayant pour id=compare
  var ordre = [0,6,1,2,3,4,5,7,8];                  // ordre d'affichage des données dans le tableau
  var oRows = oDest.rows;                           // get collection des lignes
  var indArme = ind > 0 ? ind - 1 : null;           // récup. index des données à traiter
  var arme = MultiArray[indArme];                   // pointe les données à afficher
  var i;                                            // variable de boucle  
  var nb = ordre.length;
 
  for (i = 0; i < nb; i += 1) {
    if( ordre[i] !== 6){
      oRows[i].cells[col].textContent = arme ? arme[ordre[i]] : '';
    }
    else {
      oRows[i].cells[col].innerHTML = arme ? '<img src="' +arme[ordre[i]] +'">' : '';
    }
  }
  // rempli la dernière colonne
  function calculEcart(weap1,acc1,dmg1,prt1,frt1,rec1,pic1,mob1,cap1,weap2,acc2,dmg2,prt2,frt2,rec2,pic2,mob2,cap2)
  {
   greencolor="#16B84E";
   redcolor="#FF0000";
   bluecolor="#0000FF";
   
 var accresult = col[3], row[2] ;
 var acc1 = col[1], row[2] ;
 var acc2 = col[2], row[2] ;
 
 for row (2) {
          if (acc1 == acc2)
                                {
                                 accresult=acc1-acc2;
                                 textnode_stats_accuracy=document.createTextNode(0);
                                 cell_stats_accuracy.appendChild(textnode_stats_accuracy);
                                 cell_stats_accuracy.style.color =bluecolor;
                                 cell_stats_accuracy.style.fontWeight = 'bold';
                                }
                                else
                                {
                                
                                if (acc1 > acc2)
                                  {                             
                                 textnode_stats_accuracy=document.createTextNode("+accresult");
                                 cell_stats_accuracy.appendChild(textnode_stats_accuracy);
                                 cell_stats_accuracy.style.color =greencolor;
                                 cell_stats_accuracy.style.fontWeight = 'bold';
                                   }
                                else
                                  {
                                   x=acc2-acc1;
                                   textnode_stats_accuracy=document.createTextNode(-x);
                                   cell_stats_accuracy.appendChild(textnode_stats_accuracy);
                                   cell_stats_accuracy.style.color=redcolor;
                                   cell_stats_accuracy.style.fontWeight = 'bold';
                                }
                           }                               
  
  
  
  
  
  
  
  ]
  
  
  
  
}
 
// fonction addOption
function addOption(id_dest, data) {
  var oDest = document.querySelector('#' + id_dest);
  var option;
  var i;
  var nb = data.length;
  for (i = 0; i < nb; i += 1) {
    option = new Option(data[i][0], i + 1); // on change -> data[i][0] en i + 1    
    oDest.add(option);
  }
}
// tri des données
MultiArray.sort(fctSort);
// remplissage <select>
addOption('arme_1', MultiArray);
addOption('arme_2', MultiArray);
 
//-->
 
</script>
 
 
<!--Début création tableau-->
 
<table id='compare'>
   <tr>
       <th>Weapons</th>
       <td> </td>
       <td> </td>
       <td> Points</td>
   </tr>
   <tr>
       <th>Image</th>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <th>Accuracy</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Power</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Range</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Rate of fire</th>
       <td>  </td>
       <td> </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Stability</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Mobility</th>
       <td> </td>
       <td>  </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Clip Size</th>
       <td>  </td>
       <td>  </td>
	   <td> </td>
   </tr>
</table>
 
<!--Fin du tableau-->
 
 
</body>
</html>

Si tu pouvais une nouvelle fois fois me sortir cette vilaine épine du pieds je t'en serais extrêmement reconnaissant !

**NoSmoking** · 10/09/2017, 08h22

j'aimerais bien l'améliorer un peu pour un nouveau jeu mais le javascript et moi ça fait 2

je crois malheureusement qu'il faille que tu fasses des efforts, de GROS efforts, car ce que tu présentes comme code est simplement n'importe quoi !

Inspire toi de la fonction showDetail pour la récupération, donc l'affectation, des données.

Regarde dans la console, (F12), les erreurs que ton code doit immanquablement générer.

Invité · 10/09/2017, 12h55

Ok donc j'ai repris l'exemple du ShowDetail , mais lorsque j'appuie sur F12 il n'y a rien de spécial dans la console

Du coup le code ressemble à ça maintenant mais comme tu peux te douter je n'ai rien qui s'affiche dans la dernière colonne , il y a t'il du mieux tout de même ?

Code HTML :

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Construction dynamique</title>
<style>
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
        text-align:center; 
    vertical-align:middle;
        width:400px;
}
</style>
</head>
 
<body>
<select id="arme_1" onchange="showDetail(1, this.value);">
    <option>Choix</option>
</select>
<select id="arme_2" onchange="showDetail(2, this.value);">
    <option>Choix</option>
</select>
<BR><BR>
<script>
MultiArray = [];
 
MultiArray.push( ["arx160",     89, 27, 61, 81, 92, "arx160.png",   83, 35]);
MultiArray.push( ["tar21",      89, 27, 61, 81, 92, "tar21.png",    83, 35]);
MultiArray.push( ["g36gl",      89, 27, 61, 81, 92, "g36gl.png",    83, 35]);
MultiArray.push( ["CZ 805 A2",  80, 33, 61, 71, 84, "cz805a2.png",  83, 35]);
 
function fctSort(a, b) {
  return (a[0].toUpperCase() > b[0].toUpperCase()) ? 1 : - 1;
}
 
/**
 * Fonction de remplissage d'une colonne du tableau
 * @param   {Number} col - colonne concernée par le remplissage
 * @param   {Number} ind - index dans le tableau de données
 */
function showDetail(col, ind) {
  var oDest = document.querySelector('#compare');   // récup. de la table ayant pour id=compare
  var ordre = [0,6,1,2,3,4,5,7,8];                  // ordre d'affichage des données dans le tableau
  var oRows = oDest.rows;                           // get collection des lignes
  var indArme = ind > 0 ? ind - 1 : null;           // récup. index des données à traiter
  var arme = MultiArray[indArme];                   // pointe les données à afficher
  var i;                                            // variable de boucle  
  var nb = ordre.length;
 
  for (i = 0; i < nb; i += 1) {
    if( ordre[i] !== 6){
      oRows[i].cells[col].textContent = arme ? arme[ordre[i]] : '';
    }
    else {
      oRows[i].cells[col].innerHTML = arme ? '<img src="' +arme[ordre[i]] +'">' : '';
    }
  }
  
  // rempli la dernière colonne
function calculEcart(){
    var table = document.querySelector("#compare");
    var difference;
 
    for(var i=0; i<table.rows.length; i++){
        difference = (table.rows[i].cells[1].innerHTML) - (table.rows[i].cells[2].innerHTML);
        table.rows[i].cells[3].innerHTML = difference;
        table.rows[i].cells[3].innerHTML = difference == 0 ? '' : '0';
                table.rows[i].cells[3].innerHTML = difference > 0 ? '' : '+';
                table.rows[i].cells[3].innerHTML = difference < 0 ? '' : '-';
                
    }
}
 
  
  
}
 
// fonction addOption
function addOption(id_dest, data) {
  var oDest = document.querySelector('#' + id_dest);
  var option;
  var i;
  var nb = data.length;
 console.log(id_dest, data);
  for (i = 0; i < nb; i += 1) {
    option = new Option(data[i][0], i + 1); // on change -> data[i][0] en i + 1    
    oDest.add(option);
  }
}
// tri des données
MultiArray.sort(fctSort);
// remplissage <select>
addOption('arme_1', MultiArray);
addOption('arme_2', MultiArray);
 
//-->
 
</script>
 
 
<!--Début création tableau-->
 
<table id='compare'>
   <tr>
       <th>Weapons</th>
       <td> </td>
       <td> </td>
       <td> Points</td>
   </tr>
   <tr>
       <th>Image</th>
       <td> </td>
       <td> </td>
       <td> </td>
   </tr>
   <tr>
       <th>Accuracy</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Power</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Range</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Rate of fire</th>
       <td>  </td>
       <td> </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Stability</th>
       <td>  </td>
       <td> </td>
	   <td> </td>
   </tr>
     <tr>
       <th>Mobility</th>
       <td> </td>
       <td>  </td>
	    <td> </td>
   </tr>
     <tr>
       <th>Clip Size</th>
       <td>  </td>
       <td>  </td>
	   <td> </td>
   </tr>
</table>
 
<!--Fin du tableau-->
 
 
</body>
</html>

Merci d'avance pour ton aide !

**NoSmoking** · 10/09/2017, 19h06

... il y a t'il du mieux tout de même ?

OUI !!!!

... mais comme tu peux te douter je n'ai rien qui s'affiche dans la dernière colonne ...

c'est un peu normal attendu que tu déclares bien ta fonction mais que tu n'en fait pas l'appel.

Exemple de déclaration de fonction :

Code :

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

1
2
3
function nom_fonction( param){
    // corps de la fonction
}

Exemple d'appel de fonction :

Code :

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

nom_fonction();

Remarques sur ta fonction :

Toutes les lignes ne sont pas a traiter, nom de l'arme et image par exemple.

J'ai utilisé textContent et toi innerHTML mais cela n'est pas un problème en soit sauf que tu écrases le résultat par la suite, dans cette partie du code.

Code :

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

1
2
3
4
table.rows[i].cells[3].innerHTML = difference;
table.rows[i].cells[3].innerHTML = difference == 0 ? '' : '0';
table.rows[i].cells[3].innerHTML = difference > 0 ? '' : '+';
table.rows[i].cells[3].innerHTML = difference < 0 ? '' : '-';

Invité · 10/09/2017, 19h59

Et bien merci des tuyaux , on commence par en voir le bout !

Alors j'ai modifié un peu la méthode comme tu me l'as conseillé et la dernière colonne se remplie bien mais je n'arrive pas à enlever l'écrasement du résultat de la première ligne alors que pour la deuxième ça se passe bien , une idée ?

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
 // rempli la dernière colonne
function calculEcart(){
    var table = document.querySelector("#compare");
    var difference;
 
    for( i=0; i<table.rows.length; i+= 1){
	if( ordre[i] !== 6 ){
        difference = (table.rows[i].cells[1].innerHTML) - (table.rows[i].cells[2].innerHTML);
        table.rows[i].cells[3].innerHTML = difference;
 
		}
    }
}
 
  calculEcart();
 
}

Le code en fonctionnement ici : https://jsfiddle.net/sn2wjgj8/

En l'état l'égalité et l'infériorité fonctionne bien c'est à dire que le " - " s'affiche mais le + ne s'affiche pas , merci d'avance

mais je n'arrive pas à changer la couleur de la police !

---------------------------------

Edit : J'ai réussi à afficher le " + " devant un nombre positif , je suis content

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
  // rempli la dernière colonne
function calculEcart(){
    var table = document.querySelector("#compare");
    var difference;
 
    for( i=0; i<table.rows.length; i+= 1){
	if( ordre[i] !== 6 ){
        difference = (table.rows[i].cells[1].innerHTML) - (table.rows[i].cells[2].innerHTML);
        table.rows[i].cells[3].innerHTML = difference;
 
		}
		if ( difference > 0 ) {
		table.rows[i].cells[3].innerHTML =  "+" + difference;
 
		}
 
    }
}
 
  calculEcart();
 
}

Demo : https://jsfiddle.net/dhstcb6d/

**NoSmoking** · 12/09/2017, 20h33

...mais je n'arrive pas à enlever l'écrasement du résultat de la première ligne alors que pour la deuxième ça se passe bien , une idée ?

Un indice chez vous.

Invité · 12/09/2017, 21h00

Oh la vilaine boulette ! Merci NoSmoking

Et pour la couleur du texte de la dernière cellule ( chiffre négatif : rouge , positif : vert , nul : bleu ) , tu saurais me dire comment le faire s'il te plaît ?

Edit :

J'ai réussi à obtenir le résultat que je voulais en changeant le fond de la cellule , qu'en penses-tu ?

https://jsfiddle.net/f519srzw/

**NoSmoking** · 12/09/2017, 21h43

Voilà comment je réglerais la question du style de la colonne résultat, en utilisant des classes, par exemple :

Code css :

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

1
2
3
4
5
6
7
8
9
#compare td.negatif {
  color : #B06;
}
#compare td.positif {
  color : #6B0;
}
#compare td.egal {
  color : #00F;
}

dans la fonction calculEcart j'affecterais la classe suivant le résultat obtenu.

Pour résumer je te mets ci-dessous le code que j'aurais pu produire concernant les fonction showDetail et calculEcart.

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
/**
 * Fonction de remplissage du tableau
 * @param   {Number} col - colonne concernée par le remplissage
 * @param   {Number} ind - index dans le tableau de données
 */
function showDetail(col, ind) {
  var oDest = document.querySelector('#compare');   // récup. de la table ayant pour id=compare
  var ordre = [0,6,1,2,3,4,5,7,8];                  // ordre d'affichage des données dans le tableau
  var oRows = oDest.rows;                           // get collection des lignes
  var indArme = ind > 0 ? ind - 1 : null;           // récup. index des données à traiter
  var arme = MultiArray[indArme];                   // pointe les données à afficher
  var i;                                            // variable de boucle  
  var nb = ordre.length;
 
  for (i = 0; i < nb; i += 1) {
    if( ordre[i] !== 6){
      oRows[i].cells[col].textContent = arme ? arme[ordre[i]] : '';
    }
    else {
      oRows[i].cells[col].innerHTML = arme ? '<img src="' +arme[ordre[i]] +'">' : '';
    }
  }
  // rempli la dernière colonne
  calculEcart( oRows, 2, oRows.length);
}
/**
 * Fonction de calcul des écarts
 * @param   {Object} rows - collection des lignes concernées par le calcul
 * @param   {Number} deb  - première ligne à traiter
 * @param   {Number} fin  - dernière ligne à traiter +1
 */
function calculEcart(rows, deb, fin) {
  var i;
  var val1;
  var val2;
  var ecart;
  var classe;
  for (i = deb; i < fin; i += 1) {
    // récup. des valeurs et calcul
    val1 = rows[i].cells[1].textContent * 1;
    val2 = rows[i].cells[2].textContent * 1;
    ecart = val1 - val2;
    // défini couleur suivant valeur ecart
    classe = 'egal';
    if (ecart > 0) {
      classe = 'positif';
      ecart = '+' +ecart;
    }
    if (ecart < 0) {
      classe = 'negatif';
    }
    // affecte la différence
    rows[i].cells[3].textContent = ecart;
    // ajoute la classe
    rows[i].cells[3].className = classe;
  }
}

Remplissage + Comparaison tableau Javascript

JavaScript

Discussions similaires

Partager

Partager