Récupérer données tableau

dourlens59 Messages postés 72 Statut Membre -
prosthetiks Messages postés 1309 Statut Membre - 14 mars 2014 à 12:11

Bonjour,
J'ai donc un tableau avec possibilité de cloné des lignes contenant des input.
Je chercherais à récuperer les données des input :

Mon tableau :

<div class="tabProduit">
<?php echo form_open('dossier/motifProduit');?> (framework PHP)
<table class="table table-hover" id="tableau" style="width:500px;">
<thead style="margin-top:20px;">
<tr>
<th>Nom Produit</th>
<th>Réfèrence Produit</th>
<th>Motif Appel</th>
<th>Ajouter ligne</th>
<th>Supprimer</th>
</tr>
</thead>
<tbody>
<tr style="line-height:20px;">

<td><input type="text" name="nomproduit" id="inputProduit" /></td>
<td><input type="text" name="refproduit" id="inputProduit" /></td>
<td><input type="text" name="motifappel" id="inputProduit" /></td>
<td><input type="button" name="bouton" class="btn-success" id="inputProduit" value=" + Nouvelle ligne" onclick="clone(this.parentNode.parentNode) "/></td>
<td><input type="button" name="bouton" class="btn-success" id="inputProduit" value="Supprimer" onclick="supprLigne(this.parentNode.parentNode);"></td>
</tr>
</tbody>
</table>
</form>
</div>

mon script :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript" />
<script>
$(function() {
$( "#datepicker" ).datepicker();});
</script>
<script>
function clone(line) {
newLine = line.cloneNode(true);
line.parentNode.appendChild(newLine);
}
function supprLigne(line) {
line.parentNode.removeChild(line);
}
function ajouterLigne(){
var tableau = document.getElementById("tableau");
var ligne = tableau.insertRow(-1);
var colonne1 = ligne.insertCell(0);
colonne1.innerHTML += document.getElementById("nomproduit").value;
var colonne2 = ligne.insertCell(1);
colonne2.innerHTML += document.getElementById("refproduit").value;
var colonne2 = ligne.insertCell(2);
colonne2.innerHTML += document.getElementById("motifappel").value;

}
</script>

Afficher la suite

2 réponses

Réponse 1 / 2
prosthetiks Messages postés 1309 Statut Membre 431

Je regarde
0

prosthetiks Messages postés 1309 Statut Membre 431

Voilaaa:


<html>
	<head>
		<title></title>
		<meta charset="utf8">
	</head>
	<body>
		<div class="tabProduit"> 
			<table class="table table-hover" id="tableau" style="width:500px;"> 
				<thead style="margin-top:20px;"> 
					<tr> 
						<th>Nom Produit</th> 
						<th>Réfèrence Produit</th> 
						<th>Motif Appel</th> 
						<th>Ajouter ligne</th> 
						<th>Supprimer</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr style="line-height:20px;"> 

						<td><input type="text" name="nomproduit" id="inputProduit" /></td> 
						<td><input type="text" name="refproduit" id="inputProduit" /></td> 
						<td><input type="text" name="motifappel" id="inputProduit" /></td> 
						<td><input type="button" name="bouton" class="btn-success" id="inputProduit" value=" + Nouvelle ligne" onclick="clone(this.parentNode.parentNode) "/></td> 
						<td><input type="button" name="bouton" class="btn-success" id="inputProduit" value="Supprimer" onclick="supprLigne(this.parentNode.parentNode);"></td> 
					</tr> 
				</tbody>	
			</table>
		</div>
		<div class="debug"></div>
		<button id="getResult">Récupérer résultats</button>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/> 
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript" /> 
		<script> 
		$(function() { 
		$( "#datepicker" ).datepicker();}); 
		</script> 
		<script>
			function clone(line) { 
				newLine = line.cloneNode(true); 
				line.parentNode.appendChild(newLine); 
			} 
			function supprLigne(line) { 
				line.parentNode.removeChild(line); 
			} 
			function ajouterLigne(){ 
				var tableau = document.getElementById("tableau"); 
				var ligne = tableau.insertRow(-1); 
				var colonne1 = ligne.insertCell(0); 
				colonne1.innerHTML += document.getElementById("nomproduit").value; 
				var colonne2 = ligne.insertCell(1); 
				colonne2.innerHTML += document.getElementById("refproduit").value; 
				var colonne2 = ligne.insertCell(2); 
				colonne2.innerHTML += document.getElementById("motifappel").value;
			}

			$('#getResult').click(function(){
				alert( getResult() );
			});
			function getResult(){
				var result = [];
				var $lines = $('#tableau tbody tr');
				var result = [];
				$.each($lines, function(k,v){
					var inputs = $(v).find('input[type=text]');
					var lineVal = [];
					$.each(inputs, function(k,v){
						lineVal.push($(v).val());
					});
					result.push(lineVal);
				});
				return result;
			}
		</script>
	</body>
</html>

getResult() retourne un tableau, dont le format est:


 result = [
    1 = [
          valeur input 1 de la première ligne,
          valeur input 2 de la première ligne,
          valeur input 3 de la première ligne,
       ],
    2 = [
          valeur input 1 de la seconde ligne,
          valeur input 2 de la seconde ligne,
          valeur input 3 de la seconde ligne,
       ],
       ....
  ]

En espérant avoir pu t'aider,

++

Récupérer données tableau

2 réponses

Discussions similaires

Newsletters