Tableau dynamique Javascript
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:
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:
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
