Sujet Précédent Sujet Suivant

Récuperer plusieurs lignes de tableau + envoi

Fermé
ExalightGC Messages postés 4 Date d'inscription mardi 29 avril 2014 Statut Membre Dernière intervention 30 avril 2014 - 29 avril 2014 à 10:40
 ExalightGC - 5 mai 2014 à 15:38
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. 

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

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
Répondre avec citation Répondre avec citation 0 0
A voir également:

3 réponses

Réponse 1 / 3
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 avril 2014 à 13:16
Hello,

Je m'y colle de ce pas !
0
Réponse 2 / 3
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 avril 2014 à 13:50
Voila voila: 


<!doctype html>
<html>
	<head>
        <meta charset="utf-8"/>
        <style type="text/css">
            #choiceList{
                width: 400px;
                background-color: #ddd;
                border-collapse: collapse;
            }
            #choiceList td{
                border-bottom:#333 solid 1px;
            }
            #choiceList tr:hover{
                background-color: #777;
                cursor: pointer;
            }
            #choiceList tr.selected{
                background-color: lightgreen;
            }
            #choiceList tr.selected:hover{
                background-color: green;
            }
        </style>
	</head>
	<body>
		<table id="choiceList">
		  <tr id="ligne1">
			<td class="qty">100,000</td>
			<td class="val">19,95€</td>
		  </tr>
		 <tr id="ligne2">
			    <td class="qty">500,000</td>
			    <td class="val">89,95€</td>
		  </tr>
		  <tr id="ligne3">
			    <td class="qty">1,000,000</td>
			    <td class="val">169,95€</td>
		  </tr>
		  <tr id="ligne4">
			   <td class="qty">2,500,000</td>
			   <td class="val">399,95€</td>
		  </tr>
		  <tr id="ligne5">
			    <td class="qty">5,000,000</td>
			    <td class="val">799,95€</td>
		  </tr>
		  <tr id="ligne6">
			    <td class="qty">10,000,000</td>
			    <td class="val">1399,95€</td>
		  </tr>
		  <tr id="ligne7">
			    <td class="qty">15,000,000</td>
			    <td class="val">1999,95€</td>
		  </tr>
		  <tr id="ligne8">
			    <td class="qty">20,000,000</td>
			    <td class="val">2499,95€</td>
		   </tr>
		</table>
		 
		<div class="choice">
			<input id="BNom" type="button" value="Make your choice" />
        </div>
		<div id="result"> </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            var tab = {
                _init: function(){
                    this.addEventListener();
                },
                addEventListener: function(){
                    $('#choiceList tr').click(function(){
                        if($(this).hasClass('selected')){
                            $(this).removeClass('selected');
                        }else{
                            $(this).addClass('selected');
                        }
                    });
                    $('.choice').click(function(){
                        var result = [];
                        var selected = $.each($('tr.selected'), function(k,v){
                            result.push($(v).children('.qty').text() + ' trucs for ' + $(v).children('.val').text());
                        });
                        if(result.length < 1){
                            alert('Veuillez sélectionner au moins une option dans la liste');
                            return;
                        }
                        var validation = window.confirm('Votre sélection:\n' + result.join('\n') + "\n\n Confirm your choice ?");
                        if(validation){
                            var $htmlResult = $(document.createElement('table'));
                            $htmlResult.append('<caption>Votre sélection</caption>');
                            $.each(result, function(k,v){
                                $htmlResult.append($('<tr><td>'+v+'</td></tr>'));
                            });
                            $('#result').html($htmlResult);
                            $('tr').removeClass('selected');
                        }
                    });
                }
            }
            tab._init();
        </script>
	</body>
</html>
0
Réponse 3 / 3
ExalightGC Messages postés 4 Date d'inscription mardi 29 avril 2014 Statut Membre Dernière intervention 30 avril 2014
30 avril 2014 à 13:49
Magnifique !

Merci beaucoup !

Ah, et si je veux rajouter un autre tableau similaire au premier, je duplique juste le Javascript en changeant les ID ? (mais en conservant le même bouton de validation)

Merci beaucoup encore !
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
30 avril 2014 à 13:57
quel est le comportement souhaité ? Est-ce que le second tableau apparait une fois le premier rempli et validé ou est-ce qu'il doit être possible de faire des sélections dans les deux tableaux simultanément et de valider le tout avec un seul et même bouton ?
0
ExalightGC Messages postés 4 Date d'inscription mardi 29 avril 2014 Statut Membre Dernière intervention 30 avril 2014
30 avril 2014 à 14:06
il doit être possible de faire des sélections dans les deux tableaux simultanément et de valider le tout avec un seul et même bouton
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
30 avril 2014 à 14:33
Dans ce cas, tu peux faire quelque chose dans le genre: 


<!doctype html>
<html>
	<head>
        <meta charset="utf-8"/>
        <style type="text/css">
            .choiceList{
                float: left;
                margin-right: 30px;
                width: 400px;
                background-color: #ddd;
                border-collapse: collapse;
            }
            .clear{
                clear: both;
            }
            .choiceList td{
                border-bottom:#333 solid 1px;
            }
            .choiceList tr:hover{
                background-color: #777;
                cursor: pointer;
            }
            .choiceList tr.selected{
                background-color: lightgreen;
            }
            .choiceList tr.selected:hover{
                background-color: green;
            }
        </style>
	</head>
	<body>
		<table class="choiceList">
		  <tr id="ligne1">
			<td class="qty">100,000</td>
			<td class="val">19,95€</td>
		  </tr>
		 <tr id="ligne2">
			    <td class="qty">500,000</td>
			    <td class="val">89,95€</td>
		  </tr>
		  <tr id="ligne3">
			    <td class="qty">1,000,000</td>
			    <td class="val">169,95€</td>
		  </tr>
		  <tr id="ligne4">
			   <td class="qty">2,500,000</td>
			   <td class="val">399,95€</td>
		  </tr>
		  <tr id="ligne5">
			    <td class="qty">5,000,000</td>
			    <td class="val">799,95€</td>
		  </tr>
		  <tr id="ligne6">
			    <td class="qty">10,000,000</td>
			    <td class="val">1399,95€</td>
		  </tr>
		  <tr id="ligne7">
			    <td class="qty">15,000,000</td>
			    <td class="val">1999,95€</td>
		  </tr>
		  <tr id="ligne8">
			    <td class="qty">20,000,000</td>
			    <td class="val">2499,95€</td>
		   </tr>
		</table>

                <table class="choiceList">
          <tr id="ligne1">
            <td class="qty">100,000</td>
            <td class="val">19,95€</td>
          </tr>
         <tr id="ligne2">
                <td class="qty">500,000</td>
                <td class="val">89,95€</td>
          </tr>
          <tr id="ligne3">
                <td class="qty">1,000,000</td>
                <td class="val">169,95€</td>
          </tr>
          <tr id="ligne4">
               <td class="qty">2,500,000</td>
               <td class="val">399,95€</td>
          </tr>
          <tr id="ligne5">
                <td class="qty">5,000,000</td>
                <td class="val">799,95€</td>
          </tr>
          <tr id="ligne6">
                <td class="qty">10,000,000</td>
                <td class="val">1399,95€</td>
          </tr>
          <tr id="ligne7">
                <td class="qty">15,000,000</td>
                <td class="val">1999,95€</td>
          </tr>
          <tr id="ligne8">
                <td class="qty">20,000,000</td>
                <td class="val">2499,95€</td>
           </tr>
        </table>
		<div class="clear"></div>
		<div class="choice">
			<input id="BNom" type="button" value="Make your choice" />
        </div>
		<div id="result"> </div>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            var tab = {
                _init: function(){
                    this.addEventListener();
                },
                addEventListener: function(){
                    $('.choiceList tr').click(function(){
                        if($(this).hasClass('selected')){
                            $(this).removeClass('selected');
                        }else{
                            $(this).addClass('selected');
                        }
                    });
                    $('.choice').click(function(){
                        var result = [];
                        var selected = $.each($('tr.selected'), function(k,v){
                            result.push($(v).children('.qty').text() + ' trucs for ' + $(v).children('.val').text());
                        });
                        if(result.length < 1){
                            alert('Veuillez sélectionner au moins une option dans la liste');
                            return;
                        }
                        var validation = window.confirm('Votre sélection:\n' + result.join('\n') + "\n\n Confirm your choice ?");
                        if(validation){
                            var $htmlResult = $(document.createElement('table'));
                            $htmlResult.append('<caption>Votre sélection</caption>');
                            $.each(result, function(k,v){
                                $htmlResult.append($('<tr><td>'+v+'</td></tr>'));
                            });
                            $('#result').html($htmlResult);
                            $('tr').removeClass('selected');
                        }
                    });
                }
            }
            tab._init();
        </script>
	</body>
</html>
0
ExalightGC Messages postés 4 Date d'inscription mardi 29 avril 2014 Statut Membre Dernière intervention 30 avril 2014
30 avril 2014 à 14:34
You rock ! Je t'en remercie :)
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
30 avril 2014 à 14:36
Je t'en prie, au plaisir ! :)
0

Discussions similaires

'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
Échec d’envoie message messenger
Kris68 -
Colibri -

2 réponses