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