Récuperer plusieurs lignes de tableau + envoi

ExalightGC Messages postés 4 Date d'inscription   Statut Membre Dernière intervention   -  
 ExalightGC -
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   Statut Membre Dernière intervention   431
 
Hello,

Je m'y colle de ce pas !
0
Réponse 2 / 3
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention  
 
You rock ! Je t'en remercie :)
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
Je t'en prie, au plaisir ! :)
0

Discussions similaires

Colis shein terminal fret
Lele -
bazfile -

1 réponse