Discussion :

[gyllom]

Bonjour,

Je me tourne vers vous car j'ai un petit pépin avec Javascript.

Je développe une solution permettant à une personne de créer des tableaux à partir d'un formulaire HTML.

Processus de création :
1ère étape : L'internaute choisi si il veut ajouter ou non un tableau
2ème étape : choix du nombre de colonnes du tableau
3ème étape : l'internaute peut définir le nom des colonnes de son tableau
4ème étape : on affiche le tableau avec le nombre de colonnes prédéfinis
5ème étape : possibilité d'ajouter une ligne en supplément en un clic sur "ajouter une ligne à mon tableau".

Toutes ces étapes fonctionnent et mon tableau prend vie au fur et à mesure.

Par contre si jamais je change d'avis et que :
- je ne veux plus de tableau : le tableau n'est plus affiché MAIS les lignes supplémentaires ajoutées restent affichées.
- je ne veux plus 4 mais 3 colonnes : le tableau se modifie MAIS les lignes supplémentaires ajoutées conserve 4 colonnes.

Ma partie html

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
<label name="ajout_tableau">Ajouter un tableau au document</label>
			<select name="ajout_tableau" id="ajout_tableau" onchange="AvecTableau(this)">
			<option value="0">Non</option>
			<option value="1">Oui</option>
			</select><br/>
 
 
<span id="nbre_colonne"></span>
			<span id="affichage_colonne"></span>
			<span id="total_colonne"><input type="hidden" name="total_colonne" value="0"></span>
			<h2 id="h3_tableau"></h2>
			<span id="prevention"></span><br/><br/>
			<table id="table">
			<thead><tr class="legende" id="affichage_legende"></tr></thead>
			<tr id="add_first_line"></tr>
			</table>
			<?php } ?>
			<br/>
			<span id="add_next_line" class="like_label"></span><br/>

Ma partie javascript

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
function AvecTableau(element)
{
	// L'internaute souhaite ajouter un tableau
	var ajout_tableau = element.options[element.selectedIndex].value;
	if(ajout_tableau==1) { document.getElementById('nbre_colonne').innerHTML = '<br/><label name="nbre_colonne">Choix du nombre de colonne</label><select name="nbre_colonne" id="nbre_colonne" onchange="ParametrageColonne(this)"><option value="choisir">Choisir</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><br/><br/>'; }
	else 
	{ 
	document.getElementById('nbre_colonne').innerHTML = ''; 
	document.getElementById('h3_tableau').innerHTML = '';
	document.getElementById('prevention').innerHTML = '';
	document.getElementById('affichage_colonne').innerHTML = '';
	document.getElementById('affichage_legende').innerHTML = '';
	document.getElementById('add_next_line').innerHTML = ''
	document.getElementById('add_first_line').innerHTML = '';
	/*
	document.getElementById('table').innerHTML = '&nbsp;';
	document.getElementById('nbre_ligne').innerHTML = '<input type="hidden" name="nbre_ligne" value="0"/>';
	;*/
	}
}
 
 
 
function ParametrageColonne(element)
{
	var valeur_colonne = element.options[element.selectedIndex].value;
	var increment = 1;
	var colonne = ""; // Partie qui permet de personnaliser le nom des colonnes
	var legende = ""; // Partie qui permet d'afficher le nom des colonnes dans la représentation du tableau
	var ajout_ligne = "";
 
	if(valeur_colonne>=1)
	{
		while(increment<=valeur_colonne)
		{
		colonne += '<label for="colonne'+increment+'">Nommer la colonne '+increment+'</label><input type="text" name="colonne'+increment+'" id="colonne'+increment+'" onchange="LegendeTableau('+increment+')"/><br/>';
		legende += '<td align="center" id="legende'+increment+'" width="150">Colonne '+increment+'</td>';
		ajout_ligne += '<td><input type="text" name="intab'+increment+'" size="28"/></td>';
		increment++;
		}
		//legende += '<td></td>';
		//ajout_ligne += '<td onclick="supprimerLigne(this.parentNode.rowIndex);">X</td>';
		document.getElementById('affichage_colonne').innerHTML = colonne;
		document.getElementById('affichage_legende').innerHTML = legende;
		document.getElementById('h3_tableau').innerHTML = 'Représentation du tableau';
		document.getElementById('total_colonne').innerHTML = '<input type="hidden" name="tt" id="tt" value="'+valeur_colonne+'"/>';
		document.getElementById('prevention').innerHTML = 'Attention toutes modifications ci-dessus effacera les données saisies.';
		document.getElementById('add_first_line').innerHTML = ajout_ligne;
		valeur_colonne++; // Partie qui permet de poursuivre à la suite l'input et son numéro
		document.getElementById('add_next_line').innerHTML = '<a href="javascript:addRow(\'table\',\''+valeur_colonne+'\');">Ajouter une ligne au tableau</a>';
	}
	else { document.getElementById('col1').innerHTML = ''; document.getElementById('col2').innerHTML = ''; document.getElementById('col3').innerHTML = ''; document.getElementById('col4').innerHTML = ''; }
}
 
 
function LegendeTableau(i) 
{ 
	var legende = document.getElementById('colonne'+i).value; 
	document.getElementById('legende'+i).innerHTML = legende;
}
 
 
function addRow(tableau,next_line)
{
	// valeur_intab correspond à la première valeur de intab
	tableau = document.getElementById(tableau);
	//Calcul du nombre de cellule par ligne dans le tableau -> on regarde combien il y a de td dans le premier tr
	var tds = tableau.getElementsByTagName('tr')[0].getElementsByTagName('td').length;
 
	var tr = document.createElement('tr'); //On créé une ligne
	//On ajoute autant les cellules
	for(var i=0; i<tds; i++){
		var td = document.createElement('td');
		tr.appendChild(td);
		//Si on veut mettre du contenu dans la cellule créée, ça se passe ici (sinon il suffit de supprimer cette ligne)
		td.innerHTML = '<input type="text" name="intab'+next_line+'" size="28">';
		next_line++;
	}
 
	if(tableau.firstChild.tagName == 'TBODY'){
		tableau.firstChild.appendChild(tr);
	}
	else{
		tableau.appendChild(tr);
	}
	// Pour ligne suivante
	document.getElementById('add_next_line').innerHTML = '<a href="javascript:addRow(\'table\',\''+next_line+'\');">Ajouter une ligne au tableau</a>';
 
 
}

Je pense que le problème ne doit pas être bien complexe et qu'il faut pouvoir supprimer les lignes qui ont été créées avec la fonction addrow.

Merci d'avance pour votre aide.

Guillaume

[SylvainPV]

Bonjour,

Globalement ce code présente de gros inconvénients, dans la mesure où pour afficher/masquer le tableau vous videz le HTML des sous-éléments. Or la structure DOM d'un tableau est complexe et varie sur certains navigateurs. Par exemple pour le bug des nouvelles lignes qui restent, c'est parce qu'elles sont ajoutées à <table> mais en dehors de <tbody> (le test de tagName est très imparfait, je vous suggère tableau.tBodies)

Voilà donc quelques conseils :
-ne pas partir d'une structure HTML de tableau prééxistante en page, construisez tout l'élément tableau en javascript
-utiliser des classes au lieu des IDs pour les éléments qui ne sont pas uniques (typiquement les colonnes et lignes) ou mieux, les récupérer via leur tag et leur index à partir du tableau
-utiliser le CSS et les propriétés display:block/none pour afficher/masquer du contenu, plutôt que de supprimer tout l'innerHTML
-se renseigner sur les différentes librairies existantes pour faciliter la manipulation du DOM (pour n'en citer qu'une, jQuery). Ce n'est pas un impératif mais c'est un gain de productivité indéniable.

[gyllom]

Bonjour,

Merci pour votre message.

Il est vrai que je débute en javascript et que je commence par quelque chose de complexe..

En fouillant sur developpez.net j'ai trouvé une solution qui consiste à supprimer les lignes du tableau si l'internaute change le nombre de colonnes

Voici mon code si cela intéresse quelqu'un.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var oTable = document.getElementById('table');
	var oLigne = document.getElementById("table").getElementsByTagName("TR").length;
 
	if(oLigne > 2) // Ligne légende + first line qui se met à jour sans pb
	{
		var oTotal = oLigne;
		while(oTotal>2)
		{
			oTable.deleteRow(-1);
			oTotal--;
		}
	}

Je vais bien entendu améliorer l'intégralité de mon script mais la je suis pressé.

Merci.