Tableau dynamique Javascript

**anibal** · 02/09/2007, 12h19

Bonjour,

Je voudrai créer un tableau dynamique en javascript avec un bouton qui insère des lignes et un autre dans chaque ligne créee qui supprime une ligne.

J'ai ce code là :

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
// 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 code HTML est le suivant

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
<!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 3</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>
<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>
</body>
</html>

ce code marche bien, si je le teste tout seul , par contre quand je l'intègre dans une autre page avec mise en forme et en changeant quelques petits details il marche pas, explication : quand j'ajoute des ligne tout va bien, idem quand je supprime une ligne ! MAIS il est sensé, quand je supprime meme la première ligne, d'en rajouter une quand je clique sur "ajouter une ligne", ce qui est le cas quand je le teste tel que présenté par ce code mais quand il est integré dans une autre page il marche plus, il me crée plus la première ligne quand les lignes sont toutes supprimées pourtant la ligne 0 est protégée.

Quelqu'un pourrait me dire comment faire pour empecher la suppression de la première ligne du tableau comme ça j'aurais plus ce problème ? en d'autre termes je peux supprimer n'importe quelle ligne sauf la première.

Merci beaucoup

**anibal** · 02/09/2007, 14h18

Au fait le javascript donné me pose bcp de problemes dans le sens ou il clone, ce qui fait que les taches associées à chaque element de la ligne ne sont pas clonables

si quelqu'un peut me suggérer une méthode de création dynamique de table ou d'ajout suppression de lignes ça serait génial.

Merci de votre aide

Tableau dynamique Javascript

JavaScript

Discussions similaires

Partager

Partager