[Tableau] Récupérer les valeurs array tableau dynamique

**lanner** · 10/01/2010, 23h55

Bonjour ,

j'ai trouvé une source intéressante mais il manque la partie pour trier et afficher le résultat de l'array , et la j'ai du mal (pas réussi du tout après plusieurs heures de recherche avec des boucles while ou foreach)

Le code concerne la création d'un tableau composé de champs 1 2 3 4 par ligne
Le but étant au final d'écrire dans un fichier .txt le contenu des valeurs champs[] de chaque lignes.

index.php

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
<?php
 
	if ( !empty($_POST) ) {
 
		 echo '<pre>';
		print_r($_POST);
		echo '</pre>';
		//exit; 
	}
	else
	{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type"	content="text/html; charset=ISO-8859-1" />
<meta name="robots" content="noindex, follow" />
<title>The ASW :: Tableaux dynamiques :: Exemple 4</title>
<style type="text/css">
table {
	border : 2px solid #666;
	border-collapse : collapse;
}
table thead th {
	background : #369;
	border-bottom : 2px solid #666;
	color : #fff;
}
table tbody td {
	border : 1px solid #ccc;
	padding : 5px 2px;
}
</style>
<script type="text/javascript" src="dtable.js"></script>
</head>
<body>
<form action="index.php" method="post">
  <table class="dTable">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
        <th>Colonne 4</th>
        <th>Colonne 5</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th colspan="5"><a href="#" onclick="addLigne(this); return false;">Ajouter une ligne</a></th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td><input type="text" name="champ1[]" /></td>
        <td><input type="text" name="champ2[]" /></td>
        <td><input type="text" name="champ3[]" /></td>
        <td><input type="text" name="champ4[]" /></td>
        <td><a href="#" onclick="delLigne(this); return false;">Supp</a></td>
      </tr>
    </tbody>
  </table>
  <p>
    <input type="submit" value="envoi" name="envoi" />
  </p>
</form>
<?php } ?>
</body>
</html>

dtable.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
// Tableau
 
/*
 * Utilisation :  
 *  1. Créer un tableau avec la proprieté class="dTable" (Dynamic TABLE)
 *  2. Le tableau doit être standard : il contenir un <thead>, un <tbody> et un <tfoot>
 *     et utiliser à bon escient les <td> et <th>.
 *  3. La première ligne du tbody sera utilisée comme ligne de réference.
 *     Elle sera clonée pour en ajouter de nouvelle. Elle ne sera pas affichée. 
 */
 
window.onload = dtableInit;
 
/* initialise le script */
function dtableInit() {
	var table = document.getElementsByTagName('TABLE');
	for ( var i = 0; i < table.length; i++ ) {
		// on récupère tous les tableaux dynamiques
		if ( table[i].className = 'dTable' ) {
			var tbody = table[i].tBodies[0];
			var newTr = tbody.rows[0].cloneNode(true);
 
			// on masque la première ligne du tbody (la ligne de reference)
			tbody.rows[0].style.display = 'none';
 
			// on en ajoute une
			tbody.appendChild(newTr);
		}
	}
}
 
/* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName) {
	if ( ! element )
		return null;
	else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
		return element;
	else
		return getParent(element.parentNode, parentTagName);
}
 
/* ajoute une ligne */
function addLigne(link) {
	// 1. récuperer le node "TABLE" à manipuler
	var td = link.parentNode;
	var table = getParent(td,'TABLE');
 
	// 2. on va manipuler le TBODY
	var tbody = table.tBodies[0];
 
	// 3. on clone la ligne de reference
	var newTr = tbody.rows[0].cloneNode(true);
	tbody.appendChild(newTr);
 
	if ( document.all )  // pour IE
		newTr.style.display = "block";
	else
		newTr.style.display = "table-row"; // pour Gecko
}
 
/* supprimer une ligne */
function delLigne(link) {
	// 1. récuperer le node "TABLE" à manipuler
	var td = link.parentNode;
	var table = getParent(td, 'TABLE');
 
	// 2. récuperer le TBODY
	var tbody = table.tBodies[0];
 
	// 3. Supprimer le TR
	tbody.removeChild(getParent(td, 'TR'));
}

Le tableau que donne print_r($_POST);

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
Array
(
    [champ1] => Array
        (
            [0] => 
            [1] => champ1
            [2] => champ1b
        )
 
    [champ2] => Array
        (
            [0] => 
            [1] => champ2
            [2] => champ2b
        )
 
    [champ3] => Array
        (
            [0] => 
            [1] => champ3
            [2] => champ3b
        )
 
    [champ4] => Array
        (
            [0] => 
            [1] => champ4
            [2] => champ4b
        )
 
    [envoi] => envoi
)

Le final qu'il me faudrait

champ1 champ2 champ3 champ4
champ1b champ2b champ3b champ4b
.... etc

Merci d'avance pour le coup de main

**Fench** · 11/01/2010, 08h41

Bonjour,

Ton résultat est presque bon, non ! sauf que elle commence en 1 et non en 0

Pourquoi l'affichage commence par 1, c parceque dans ta fonction AddLigne, tu append a child directement au premier coup donc forcement le résultat

Il faudrait pouvoir différencier la racine de la première feuille dans cette fonction.

**lanner** · 11/01/2010, 12h39

oui j'ai remarqué ce soucis mais dans l'état des choses je ne sais pas comment afficher le resultat comme il se doit, la construction d'une boucle pour l'affichage est mon blocage, j'ai fait des test avec des foreach mais je n'arrive qu'a afficher une seule ligne..

[Tableau] Récupérer les valeurs array tableau dynamique

Langage PHP

Discussions similaires

Partager

Partager