11496 sujets

JavaScript, DOM et API Web HTML5

JS - selection de lignes dans un tableau + envoi

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 !


Exalight
[/i][/i][/i]
Bonjour,

Comme souvent il y a plusieurs solutions, à voir en fonction de tes goûts :

solutions HTML
- rajouter une "checkbox" dans les lignes pour les sélectionner

solution JS
- mémoriser les lignes sélectionnées dans un tableau, ... c'est un peu lourd

solution mixte :
- rajouter une class = "selected" lors d'un clic sur la ligne
- supprimer la class "selected" si elle existe déjà (ainsi un 2e clic sur la ligne la dé-selectionne)
Tout çà se fait très facilement avec jquery par exemple (toggleClass("selected"))
- identifier dans le css les lignes sélectionnées, par exemple en colorant en orange les éléments de classe .selected

ensuite à la confirmation il suffit de parcourir les lignes de classe "selected". Si tu ne souhaites pas utiliser de bibliothèque de type jquery, ce sera un peu plus long à coder mais çà se fait.
Modifié par Zebrou (29 Apr 2014 - 17:38)
Pourquoi pas comme ça :

$(function() {
	var arraymsg = [];
	$('tr').click(function() {
		idtr = this.id;
		if ($(this).hasClass('selection')) {
    		$(this).removeClass('selection');
		 	arraymsg.pop(idtr);
    	}else {
	 $(this).addClass('selection');
	 arraymsg.push(idtr);
		}
	});

	$('#BNom').click(function() {
		
		var msg = "Your selection : ";
		if(arraymsg.length != 0){
	  		for (var i = 0; i < arraymsg.length; i++) {
	  			var datainfo = $('#'+arraymsg[i]).data('info');
	   			msg += '\n'+datainfo;
	 
			}
    		alert(msg);
    	}else{
    		alert("You didn't choose !");
    	}
	});
});


<table>
                  <tr id="1" data-info="100,000 trucs for 19,95€ per month">
                    <th>100,000</th>
                    <th>19,95€</th>
                  </tr>
                  <tr id="2" data-info="500,000 trucs for 89,95€ per month">
                    <td>500,000</td>
                    <td>89,95€</td>
                  </tr>
                  <tr id="3" data-info="1,000,000 trucs for 169,95€ per month">
                    <td>1,000,000</td>
                    <td>169,95€</td>
                  </tr>
                  <tr id="4" data-info="2,500,000 trucs for 399,95€ per month">
                    <td>2,500,000</td>
                    <td>399,95€</td>
                  </tr>
                  <tr id="5" data-info="5,000,000 trucs for 799,95€ per month">
                    <td>5,000,000</td>
                    <td>799,95€</td>
                  </tr>
                  <tr id="6" data-info="10,000,000 trucs for 1399,95€ per month">
                    <td>10,000,000</td>
                    <td>1399,95€</td>
                  </tr>
                  <tr id="7" data-info="15,000,000 trucs for 1999,95€ per month">
                    <td>15,000,000</td>
                    <td>1999,95€</td>
                  </tr>
                  <tr id="8" data-info="20,000,000 trucs for 2999,95€ per month">
                    <td>20,000,000</td>
                    <td>2499,95€</td>
                  </tr>
                </table>

<div class="choice"><input id="BNom" type="button" value="Make your choice" />
<div id="result"> </div>
</div>


Oublie pas de mettre ça avant le js :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


Je pense que c'est relativement plus simple et plus court, si tu as des questions n'hésite pas.[/i]
Modifié par tsakl (29 Apr 2014 - 17:41)
Bonjour à vous deux,

merci beaucoup pour votre aide ! Ca marche du tonnerre Smiley smile

J'aurais encore une question pour finaliser mon code :

Quand on a deux tableaux par exemple (un duplicata du premier tableau avec les id qui se suivent : 8,9,10 etc...)
Je sélectionne au hasard deux lignes des deux tableaux, je valide mais les messages ne se suivent pas... Smiley ohwell

Je mets ici le code (css+js+html) Copiez le et testez le, vous verrez de vous même :
Faites pas attention à la sémantique du code si vous êtes pointilleux, c'est juste une page de test.
tableau.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> test page </title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
$(function() {
	var arraymsg = [];
	$('tr').click(function() {
		idtr = this.id;
		if ($(this).hasClass('selection')) {
    		$(this).removeClass('selection');
		 	arraymsg.pop(idtr);
    	}else {
	 $(this).addClass('selection');
	 arraymsg.push(idtr);
		}
	});

	$('#BNom').click(function() {
		
		var msg = "Your selection : ";
		if(arraymsg.length != 0){
	  		for (var i = 0; i < arraymsg.length; i++) {
	  			var datainfo = $('#'+arraymsg).data('info');
	   			msg += '\n'+datainfo; 

			}
    		alert(msg);
    		      elmt = document.getElementById("result");
     			 elmt.innerHTML =  msg ;
    	}else{
    		alert("You didn't choose !");
    	}
	});
});	
	</script>

	<style type="text/css">
.price
{
	width: 317px;
	margin: 50px auto;
	text-align: center;
	display: inline-block;
	color: #fff;
	vertical-align: top;
	font-family: 'Century Gothic', Helvetica, sans-serif;
	cursor: pointer;
}

th, td
{
	text-align: center;
	height: 50px;
	width: 140px;
	display: table-cell;
	vertical-align: middle;
}



.header-price
{
	width: 280px;
	height: 100px;
	margin: 0 auto;
	background-color: #f02c2d;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.header-price h2
{
	width: 280px;
	height: 50px;
	font-size: 1.7em;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.header-price h3
{
	text-align: center;
	height: 50px;
	width: 140px;
	float: left;
}

.content-price
{
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	width: 280px;
	margin: 0 auto;
	background-color: #f02c2d;
}

.content-price td:nth-child(odd), .content-price th:first-child
{
	border-right: 1px solid;

}

.content-price tr:nth-child(odd):hover
{
	background-color: #F86060;
	transition: all .125s ease-in-out;
}

.content-price tr:nth-child(even):hover
{
	background-color: #F88888;
	transition: all .3s ease-in-out;
}

.default
{
 background-color: #f02c2d;
}

.selection
{
	background-color: #fff;
	color:#f02c2d;
	border-width: 0px 1px 0px 1px;
	border-color: #f02c2d;
	border-style: solid;
	width: 277px;
}

.choice input
 {
    margin-top: 10px;
    vertical-align: top;
    width: 225px;
    height: 60px;
    padding: 0;
    font-size: 22px;
    color:#454545;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    background: #ecf0f1;
    border: 0;
    border-bottom: 2px solid #dadedf;
    cursor: pointer;
    -webkit-box-shadow: inset 0 -2px #dadedf;
    box-shadow: inset 0 -2px #dadedf;
    -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.choice input:active, .choice input:hover {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
	</style>

</head>
<section id="price">
		<div class="price price1">
			<div class="header-price">
				<h2>Trucs 1</h2></th>
				<h3>lorem truc</h3>
				<h3>Price</h3>
			</div>
			<div class="content-price">
			<table>
                  <tr id="1" data-info="100,000 Trucs 1 for 19,95€ per month">
                    <th>100,000</th>
                    <th>19,95€</th>
                  </tr>
                  <tr id="2" data-info="500,000 Trucs 1 for 89,95€ per month">
                    <td>500,000</td>
                    <td>89,95€</td>
                  </tr>
                  <tr id="3" data-info="1,000,000 Trucs 1 for 169,95€ per month">
                    <td>1,000,000</td>
                    <td>169,95€</td>
                  </tr>
                  <tr id="4" data-info="2,500,000 Trucs 1 for 399,95€ per month">
                    <td>2,500,000</td>
                    <td>399,95€</td>
                  </tr>
                  <tr id="5" data-info="5,000,000 Trucs 1 for 799,95€ per month">
                    <td>5,000,000</td>
                    <td>799,95€</td>
                  </tr>
                  <tr id="6" data-info="10,000,000 Trucs 1 for 1399,95€ per month">
                    <td>10,000,000</td>
                    <td>1399,95€</td>
                  </tr>
                  <tr id="7" data-info="15,000,000 Trucs 1 for 1999,95€ per month">
                    <td>15,000,000</td>
                    <td>1999,95€</td>
                  </tr>
                  <tr id="8" data-info="20,000,000 Trucs 1 for 2999,95€ per month">
                    <td>20,000,000</td>
                    <td>2499,95€</td>
                  </tr>
               </table>
			</div>
		</div>
		<div class="price price2">
			<div class="header-price">
				<h2>trucs 2</h2></th>
				<h3>lorem truc</h3>
				<h3>Price</h3>
			</div>
			<div class="content-price">
			<table>
				  <tr id="9" data-info="100,000 trucs 2 for 39,95€ per month">
				    <th>100,000</th>
				    <th>39,95€</th>
				  </tr>
				  <tr id="10" data-info="500,000 trucs 2 for 174,95€ per month">
				    <td>500,000</td>
				    <td>174,95€</td>
				  </tr>
				  <tr id="11" data-info="1,000,000 trucs 2 for 329,95€ per month">
				    <td>1,000,000</td>
				    <td>329,95€</td>
				  </tr>
				  <tr id="12" data-info="2,500,000 trucs 2 for 799,95€ per month">
				    <td>2,500,000</td>
				    <td>799,95€</td>
				  </tr>
				  <tr id="13" data-info="5,000,000 trucs 2 for 1499,95€ per month">
				    <td>5,000,000</td>
				    <td>1499,95€</td>
				  </tr>
				  <tr id="14" data-info="10,000,000 trucs 2 for 2799,95€ per month">
				    <td>10,000,000</td>
				    <td>2799,95€</td>
				  </tr>
				  <tr id="15" data-info="15,000,000 trucs 2 for 3999,95€ per month">
				    <td>15,000,000</td>
				    <td>3999,95€</td>
				  </tr>
				  <tr id="16" data-info="20,000,000 trucs 2 for 5999,95€ per month">
				    <td>20,000,000</td>
				    <td>5999,95€</td>
				  </tr>
				</table>
			</div>
		</div>
 
<div class="choice"><input id="BNom" type="button" value="Make your choice" />
<div id="result"> </div>
</div>
</div>

</section>
</body>
</html>


Pour ce qui est de la suite, je vais essayer moi-meme de récuperer les informations sélectionnés pour les envoyer ensuite via un formulaire.
Je vous tiens au courant Smiley smile

Encore merci

Exa
Ca devrait être mieux comme ça ^^

$(function() {
	var arraymsg = [];
	var msg;
	$('tr').click(function() {
		idtr = this.id;
		if ($(this).hasClass('selection')) {
    		$(this).removeClass('selection');
		 	arraymsg = $.grep(arraymsg, function(value) {
			  return value !== idtr;
			});
			arraymsg.concat( arraymsg );
    	}else {
	 $(this).addClass('selection');
	 arraymsg.push(idtr);
		}
	});

	$('#BNom').click(function() {
		msg = "Your selection : ";
		if(arraymsg.length != 0){
	  		for (var i = 0; i < arraymsg.length; i++) {

	  			var datainfo = $('#'+arraymsg[i]).data('info');
	   			msg += '\n'+datainfo; 
			}
    		alert(msg);
    		      elmt = document.getElementById("result");
     			 elmt.innerHTML =  msg ;
    	}else{
    		alert("You didn't choose !");
    	}
	});
});
[/i]
salut,
l'idée proposée semble correspondre, j'ai eu exactement la même. J'ai fait un exemple en JS pur (tout pourri je sais... mais interdiction d'en rire !) qui n'est cependant pas compatible FF3, IE8 et moins mais vu que tu utilises JQuery ça sera simple.

Par contre c'est "You haven't chosen anything" Smiley lol
En réalité lors de c/c du script ça a supprimé [ i ] dans la ligne :

var datainfo = $('#'+arraymsg[i]).data('info');


il faut donc remplacer arraymsg par arraymsg [ i ] (sans les espaces)

[/i]
Modifié par tsakl (30 Apr 2014 - 16:12)
Smiley biggrin Oui enfin, ton code ressemble plus à ça. Il n'y a rien d'extra non plus et quand on sait le faire, on est un peu moins émerveillé par toutes les bibliothèques et plugins du net. Mais comme déjà dit, vu qu'il utilise déjà JQuery autant le faire pour ne pas avoir à rendre compatible ce code avec les vieux navigateurs.
Effectivement, le code jQuery de Zebrou est très facile à comprendre, et très simple !

Merci Smiley smile
Sujet clos
Aller à