IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajouter des lignes dans un tableau en faisant la somme des valeurs d'une colonne


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Etudiant
    Inscrit en
    Septembre 2011
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Etudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2011
    Messages : 80
    Points : 53
    Points
    53
    Par défaut Ajouter des lignes dans un tableau en faisant la somme des valeurs d'une colonne
    Bonjour la communauté,

    J'ai un formulaire avec deux champs (nom produit et quantité).
    Le champ nom produit fonctionne avec de l'autocompletion et il n'y a pas de problème à ce niveau.

    Voici le code html de mon formulaire
    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
    		<div class="col-sm-12 col-md-12 col-lg-12">
    			<div class="card" id="profile-main">
    				<div id="error_register" class="row">
     
    				</div>
    				<form name="form-enr-produit" id="register_form_produit" method="POST" onsubmit="return false;"  class="myformsave">
    					<h4 class="p-l-20">Veuillez remplir le formulaire  !</h4>
    					<div class="col-sm-12 col-md-12 col-lg-12">
    						<div class="col-sm-6">
    							<div class="input-group m-b-20">
    								<span class="input-group-addon"><i class="zmdi zmdi-assignment"></i></span>
    								<!--div class="fg-line"-->
    								<input type="text" id="nomProduit" name="nomProduit" value="" class="form-control" placeholder="Nom du produit">
    								<small id="error_nomProduit" class="error_txt"></small>
    								<!--/div-->
    							</div>
    							<div class="resultsearch"></div>
    						</div>
    						<div class="col-sm-3">
    							<div class="input-group m-b-20">
    								<span class="input-group-addon"><i class="zmdi zmdi-grain"></i></span>
    								<input type="text" id="qTiteStock" name="qTiteStock" value="" class="form-control" size="20" placeholder="Quantité">
    								<small id="error_qTiteStock" class="error_txt"></small>
    							</div>
    						</div>
    						<div class="col-sm-3">
    							<button type="submit" id="bSaveData" class="btn btn-primary btn-sm m-t-10 waves-effect pull-right">Enregistrer</button>
    						</div>
    					</div>
     
    				</form>
    			</div>
    		</div>

    Et voici le code js de contrôle du formulaire:
    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
    $(document).ready(function() {
    	//Recherche du Produit
    	$("#nomProduit").keyup(function(){
    		$("#charge").css("visibility", "visible");
    		var trouve=$(this).val();
    		if(trouve!=""){
    			$.ajax({
    				type: "post",
    				url:  "/saremati/php/verif_form_save_commande.php",
    				data: {trouve:trouve},
    				success: function(data){
    					$(".resultsearch").fadeIn();
    					$(".resultsearch").html(data);
    				}
    			});
    		}else{
    			$(".resultsearch").fadeOut(400);
    			$(".resultsearch").html("");
    		}
     
    	});
    	$(document).on('click', 'li', function(){
    		$('#nomProduit').val($(this).text());
    		$('.resultsearch').fadeOut();
    	});
    	//Vérification du champ quantité du produit
    	$("#qTiteStock").keyup(function(){
    		if(!$(this).val().match(/^[0-9]{1,7}$/)){
    			$("#qTiteStock").css("border-color","#ff0000");
    			$("#error_qTiteStock").css("color", "red").html("<i class='glyphicon glyphicon-warning-sign'></i><img src='/saremati/img/icons/warning.png' alt='Attention' class='erreur'> Caractères numériques seulement de 0 à 9999999 !");
    		}
    		else{
    			$("#qTiteStock").css("border-color","green");
    			$("#error_qTiteStock").css("color", "green").html("<img src='/saremati/img/icons/ok24.png' alt='Ok'>");
    		}
    	});
    });
    Maintenant après la saisie du nom de produit et de la quantité, je voudrais que quand l'utilisateur clique sur le bouton Enregistrer qu'une ligne de tableau s'ajoute juste en bas du formulaire avec les colonnes suivantes comme l'illustre le tableau ci-dessous:

    Nom du produit Prix
    1 Riz 25 Kg 100 000
    2 Riz 50 Kg 200 000
    3 Romi 900g 25 000
    4 Thé 1 000

    Les éléments du tableau doivent être ajoutés lignes par lignes sur clique du bouton Enregistrer et c'est ce que je n'arrive pas à faire cher amis du forum!
    Nom : ajout-ligne-tableau-jquery.jpg
Affichages : 797
Taille : 94,9 Ko

    Merci à l'avance pour vos différentes réponses!

  2. #2
    Membre régulier
    Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juillet 2011
    Messages
    112
    Détails du profil
    Informations personnelles :
    Localisation : Guinée

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juillet 2011
    Messages : 112
    Points : 90
    Points
    90
    Par défaut
    Commence par créer une table juste en bas de ton formulaire comme suit:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <table id="maTable" class="table table-bordered">
    	<thead><tr><th></th><th>Produits</th><th>Prix</th></thead>
    	<tbody></tbody>
    </table>

    Et essaye d'ajouter ceci dans ton fichier js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    //Clique sur le bouton bSaveData
    	var i=0; 
    	var nomProduit=$('#nomProduit').val(); 
    	var qTiteStock=$('#qTiteStock').val();
    	$('#bSaveData').click(function(){
    		i++;
    		$('#maTable tr:last').after('<tr><td></td><td>'+nomProduit+'</td><td>'+qTiteStock+'</td></tr>');
    	});

  3. #3
    Membre du Club
    Homme Profil pro
    Etudiant
    Inscrit en
    Septembre 2011
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Etudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2011
    Messages : 80
    Points : 53
    Points
    53
    Par défaut
    Bonjour onesat,

    J'ai essayé le code que tu m'as dit d'ajouter dans mon fichier js, chose que j'ai fais mais il y avait une erreur au niveau de l'emplacement de la déclaration des variables!
    Les variables
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    var nomProduit=$('#nomProduit').val(); 
    var qTiteStock=$('#qTiteStock').val();
    Devrait être déclarée après l’événement de clique sur le bouton Enregistrer comme suit:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    //Clique sur le bouton bSaveData
    	var i=0; 
     
    	$('#bSaveData').click(function(){
                    var nomProduit=$('#nomProduit').val(); 
    	        var qTiteStock=$('#qTiteStock').val();
    		i++;
    		$('#maTable tr:last').after('<tr><td></td><td>'+nomProduit+'</td><td>'+qTiteStock+'</td></tr>');
    	});
    La sa fonctionne ! Je vais faire quelques retouches et revenir après!

  4. #4
    Membre du Club
    Homme Profil pro
    Etudiant
    Inscrit en
    Septembre 2011
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Etudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2011
    Messages : 80
    Points : 53
    Points
    53
    Par défaut
    Bonjour la communauté,

    j'ai apporté les modifications sur le code coté html et coté js

    Pour le html le contenu est devenu ceci:
    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
    <div class="col-sm-12 col-md-12 col-lg-12">
    			<div class="card" id="profile-main">
    				<div id="error_register" class="row">
     
    				</div>
     
    					<h4 class="p-l-20">Veuillez remplir le formulaire  !</h4>
    					<!-- onesat -->
    					<div class="col-sm-12 col-md-12 col-lg-12">
    						<div class="col-sm-1">
    							<input type="text" id="no" name="no" class="form-control input-sm">
    							<small id="error_nomProduit" class="error_txt"></small>
    						</div>
    						<div class="col-sm-5">
    							<div class="input-group m-b-20">
    								<span class="input-group-addon"><i class="zmdi zmdi-assignment"></i></span>
    								<!--div class="fg-line"-->
     
    								<input type="text" id="nomProduit" name="nomProduit" class="form-control" placeholder="Nom du produit">
    								<small id="error_nomProduit" class="error_txt"></small>
    								<!--/div-->
    							</div>
    							<div class="resultsearch"><!--img id="charge" src="/saremati/img/animee/chargeur.gif" class="erreur"--></div>
    						</div>
    						<div class="col-sm-3">
    							<div class="input-group m-b-20">
    								<span class="input-group-addon"><i class="zmdi zmdi-grain"></i></span>
    								<input type="text" id="qTiteStock" name="qTiteStock" class="form-control" size="20" placeholder="Quantité">
    								<small id="error_qTiteStock" class="error_txt"></small>
    							</div>
    						</div>
    						<div class="col-sm-3">
    							<button id="bAjouter" class="btn btn-primary btn-sm m-t-10 waves-effect pull-right">Ajouter</button>
    						</div>
    					</div>
    				<form name="form-enr-produit" id="register_form_commande" method="POST" onsubmit="return false;"  class="myformsave">
    					<input type="hidden" id="sooc" name="sooc" value="<?php echo $idu; ?>">
    					<input type="hidden" id="fournisseur" name="fournisseur" value="<?php echo $_GET['oof']; ?>">
    					<div class="col-sm-12 col-md-12 col-lg-12">
    						<table id="maTable" class="table table-bordered">
    							<thead><tr><th></th><th>Produits</th><th colspan=2>Quantité</th></thead>
    							<tbody></tbody>
    						</table>
     
    						<div class="col-sm-12">
    							<button type="submit" id="bSaveData" class="btn btn-primary btn-sm m-t-10 waves-effect pull-left">Enregistrer</button>
    						</div>
    					</div>
    				</form>
    			</div>
    		</div>

    Pour le fichier js:

    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
    // JavaScript Document
    $(function(){
    	//nombre de ligne ajouter
    	var set_number=function(){
    		var table_len=$('#maTable tbody tr').length+1;
    		$('#no').val(table_len);
    	}
    	set_number();
     
    	//Clique sur le bouton bAjouter
    	$('#bAjouter').click(function(){
    		var no=$('#no').val();
    		var nomProduit=$('#nomProduit').val();
    		var qTiteStock=$('#qTiteStock').val();
     
    		//Ajout des donnees dans le tableau
    		$('#maTable').append(
    			'<tr>'+
    				'<td>'+no+'</td>'+
    				'<td>'+nomProduit+'</td>'+
    				'<td>'+qTiteStock+'</td>'+
    			'</tr>'
    		);
    		//Vider les input
    		$('#no').val('');
    		$('#nomProduit').val('');
    		$('#qTiteStock').val('');
    		//Appel de la fonction pour ajouter une nouvelle valeur
    		set_number();
    	});
    	//Clique sur le bouton d'enregistrement
    	$('#bSaveData').click(function(){
    		var table_data=[];
    		//utilisation de each
    		$('#maTable tr').each(function(row,tr){
    			//Creation d'un tableau pour stocker les donnees par ligne
    			//Envoi des donnees avec valeur
    			if($(tr).find('td:eq(0)').text()==""){
     
    			}else{
    				var sub={
    					'no': $(tr).find('td:eq(0)').text(),
    					'nomProduit':$(tr).find('td:eq(1)').text(),
    					'qTiteStock':$(tr).find('td:eq(2)').text(),
    				};
    				table_data.push(sub);
    			}
     
    		});
                    // L'ajout des deux variables suivantes dans le tableau table_data pose problème côté php surtout quand j'essaye de récupérer l'ensemble des valeurs 
    		var sooc=$('#sooc').val();
    		var fournisseur=$('#fournisseur').val();
    		table_data.push({sooc:sooc,fournisseur:fournisseur}); // Et c'est l'ajout de ses deux valeurs qui pose problème côté php quand j'essaye de parcourrir et de
                    //récupérer les valeurs du tableau avec une boucle for
    		//console.log(table_data);
    		$("#bSaveData").click(function(){
    			var data={'data_table': table_data};
    			$.ajax({
    				data:data,
    				type: "post",
    				url: "/saremati/php/verif_form_save_commande.php",
    				dataType:'json',
    				cache:false,
    				beforeSend: function(){
    					$("#bSaveData").attr("disabled",true);
    				},
    				success: function(data){
    					//$("#error_register").html(data); //.fadeIn(400);
    					$("#bSaveData").attr("disabled",false);
    				}
    			});
    		});
    	});
     
    });
    Le fonctionnement reste toujours le même comme l'indique la capture d'écran précédente ! Ce qui change c'est que j'ai remplacé la colonne Prix par Quantité!
    En plus de cela, dans le code html juste avant le tableau il y'a deux champ texte qui sont cachés et j'ai besoin de la valeur de ces deux inputs cachés!

    Pour cela, j'ai récupérer et ajouter leurs valeurs dans le tableau table_data avec cette ligne de code contenu dans le fichier js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
                    var sooc=$('#sooc').val();
    		var fournisseur=$('#fournisseur').val();
    		table_data.push({sooc:sooc,fournisseur:fournisseur}); // Et Cette ligne pose problème coté php quand j'essaye de lire les deux variables sooc et fourniss
    Vous pouvez voir l'aperçu des données envoyées au serveur avec la capture d'écran suivante
    Nom : table_data.jpg
Affichages : 638
Taille : 135,0 Ko

    D'abord je suis confus par ce que je me demande bien si le problème doit être résolu coté ou coté php? Donc, j'ai besoin de savoir s'il n'y a pas d'erreur quelconque dans mon code js.

  5. #5
    Membre du Club
    Homme Profil pro
    Etudiant
    Inscrit en
    Septembre 2011
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Sénégal

    Informations professionnelles :
    Activité : Etudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Septembre 2011
    Messages : 80
    Points : 53
    Points
    53
    Par défaut
    Vous pouvez voir le code php en ouvrant cette discussion : Comment récupérer les données d'un tableau obtenu avec push

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    Vous pouvez voir le code php en ouvrant cette discussion
    certes mais on est ici dans le forum JavaScript alors l'intérêt ?????

    C'est le code HTML généré qu'il faut nous transmettre !

Discussions similaires

  1. Ajout de ligne dans un tableau
    Par mannkael dans le forum Excel
    Réponses: 1
    Dernier message: 04/01/2010, 16h50
  2. Ajout de lignes dans un tableau
    Par dinier dans le forum Macros et VBA Excel
    Réponses: 23
    Dernier message: 16/05/2009, 22h29
  3. Ajout de ligne dans un tableau html
    Par jmtrivia dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 16/04/2009, 14h26
  4. Ajout de ligne dans un tableau ajoute un espace vide
    Par le_chomeur dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 04/01/2008, 15h18
  5. [DOM] ajout de lignes dans un tableau
    Par Invité dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 30/11/2007, 08h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo