Discussion :

[Exalight]

Bonjour à tous !

Je viens de débuter en Javascript, et j'aurais besoin d'une solution..

J'ai créé un tableau en HTML avec des valeurs, dont voici une partie.

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
<table>
	  <tr id="ligne1" onclick="SelectLigne(this)">
		<th>100,000</th>
		<th>19,95€</th>
	  </tr>
	 <tr id="ligne2" onclick="SelectLigne(this)">
		    <td>500,000</td>
		    <td>89,95€</td>
	  </tr>
	  <tr id="ligne3" onclick="SelectLigne(this)">
		    <td>1,000,000</td>
		    <td>169,95€</td>
	  </tr>
	  <tr id="ligne4" onclick="SelectLigne(this)">
		    <td>2,500,000</td>
		    <td>399,95€</td>
	  </tr>
	  <tr id="ligne5" onclick="SelectLigne(this)">
		    <td>5,000,000</td>
		    <td>799,95€</td>
	  </tr>
	  <tr id="ligne6" onclick="SelectLigne(this)">
		    <td>10,000,000</td>
		    <td>1399,95€</td>
	  </tr>
	  <tr id="ligne7" onclick="SelectLigne(this)">
		    <td>15,000,000</td>
		    <td>1999,95€</td>
	  </tr>
	  <tr id="ligne8" onclick="SelectLigne(this)">
		    <td>20,000,000</td>
		    <td>2499,95€</td>
	  </tr>
</table>
 
<div class="choice">
<input id="BNom" onclick="ConfirmChoix()" type="button" value="Make your choice" />
<div id="result"> </div>
</div>

Ce que je veux faire, c'est une selection d'une ou plusieurs lignes du tableau (tr) et via un JS.

quand l'utilisateur clique sur une ou plusieurs lignes du tableau, puis sélectionne le bouton de validation; un pop up s'ouvre pour la validation du choix.

Une fois le pop up validé, le choix s'affiche sur la div "result".



Mon script permet de faire cela, mais seulement pour une ligne du tableau à la fois... Un peu d'aide pour que le script autorise la selection multiple de lignes avant la validation ?

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
ObjSelec = null;
function SelectLigne(obj){
 var idLigne=obj.id;
 obj.className="selection";
 
 if (ObjSelec!=null){
    ObjSelec.className = "defaut";
    ObjSelec = obj;
 }
 else{
    ObjSelec = obj;
 }
}
 
function ConfirmChoix(){
 var msg = "Your selection : ";
 var objId, elmt, resultat, i, n;
 var Tab=new Array();
 
 if (ObjSelec != null) {
    objId = ObjSelec.id;
    switch(objId){
    case "ligne1":
         msg = msg + "100,000 trucs for 19,95€ per month";
         break;
    case "ligne2":
         msg = msg + "500,000 trucs for 89,95€ per month";
         break;
    case "ligne3":
         msg = msg + "1,000,000 trucs for 169,95€ per month";
         break;
    case "ligne4":
         msg = msg + "2,500,000 trucs for 399,95€ per month";
         break;
    case "ligne5":
         msg = msg + "5,000,000 trucs for 799,95€ per month";
         break;
    case "ligne6":
         msg = msg + "10,000,000 trucs for 1399,95€ per month";
         break;
    case "ligne7":
         msg = msg + "15,000,000 trucs for 1999,95€ per month";
         break;
    case "ligne8":
         msg = msg + "20,000,000 trucs for 2999,95€ per month";
    }
 
    resultat = window.confirm(msg + "\n Confirm your choice ?");
 
    if (resultat){
      elmt = document.getElementById(objId);
      n=0;
      for(i=0;i<elmt.childNodes.length;i++){
         if (elmt.childNodes[i].nodeName=="TD" || elmt.childNodes[i].nodeName=="td"){
             Tab[n] = elmt.childNodes[i].innerHTML;
             n++;
         }
      }
      elmt = document.getElementById("result");
      elmt.innerHTML =  msg;
    }
 }
 else{
    alert("You didn't choose !");
 }
}

L'idéal serait qu'après, on puisse envoyer les informations selectionnés via un formulaire.



Merci de vos possibles futures réponses !



Signé, un gros noob en JS



Exalight

[NoSmoking]

Bonjour,
je prendrais une autre orientation.

- au clic sur la TR ajout de la classe selection, si autre clic suppression de la classe et ainsi de suite en alternance.

Code :

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

1
2
3
function SelectLigne(obj){
  obj.className = obj.className == 'selection' ? '' : 'selection';
}

- sur le clic du BUTTON récupération des TR qui possédent la classe selection.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ConfirmChoix(){
  var oTable = document.getElementById('la_table'),
      oDest  = document.getElementById('result'),
      oTr = oTable.rows,
      i, nb = oTr.length,
      result = [];
 
  for( i=0; i <nb; i++){
    if( oTr[i].className == 'selection'){
      result.push( oTr[i].textContent || oTr[i].innerText); // Juste pour l'exemple
    }
  }
  oDest.innerHTML = '<ul><li>' +result.join('<\/li><li>') +'<\/li><\/ul>';
}

La gestion devient pour le coup bien plus simple

[sekaijin]

une façon simple
mettre le tableau dans un form avec le bouton
ajouter une colonne avec un checkbox
modifier la fonction SelectLigne pour simuler la check/uncheck de la checkbox de la ligne

dans le bouton récupérer le form
tu as toutes les boites cochées et décochée

A+JYT