Remplacer du texte dans un tableau par une image

**vandman** · 23/06/2016, 11h10

Bonjour,

J'ai le code suivant et à la place du texte "Supprimer", je voudrais avoir une image. Comment faire?

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
function PasteCode(event)
{
	var PastedData = "";
    if (window.clipboardData && window.clipboardData.getData) // IE
        PastedData = window.clipboardData.getData('Text');
    else if (event.clipboardData && event.clipboardData.getData)
        PastedData = event.clipboardData.getData('text/plain');
 
	form = document.getElementById("FormCodeLibelle");
	var input      = document.createElement("input");
    // récupère l'élément <table id='TableauCodeLibelle'> et l'élément <tbody id='tbodyCodeLibelle'>
    var table      = document.getElementById("TableauCodeLibelle");
    var tablebody      = document.getElementById("tbodyCodeLibelle");
    // -1 car nous retirons la ligne d'entête
    var DerniereLigneTableau = table.rows.length - 1;
    supprimerLigne(DerniereLigneTableau, "TableauCodeLibelle");
 
	// éclate les données dans un tableau, ici "content". Il s'agit d'une liste de données à une dimention.
    var content = PastedData.split(/[\t\r\n]/g);
 
    //content.length = nombre de valeur dans "content"nous retirons 1 car l'indice du tableau commence à 0
	var NbrOfContent = content.length - 1;
	// variable utilisé pour se positionner dans le tableau "content"
	var NumChamp = 0;
	var champ_pair = 0;
 
	//Nous sommes dans un tableau à 2 colonnes, le nombre de donnée présente doit être paire.
	//Pour avoir un nombre pair de donnée avec un indice commencant à 0, NbrOfContent doit être impair
	if (NbrOfContent % 2 == 0)
	{
		NbrOfContent++
		content[NbrOfContent] = "";
	}
	//Création du tabeau-formulaire
	for (var NumChamp = 0; NumChamp <= NbrOfContent; NumChamp++)
    {
		var cell;
		if (content[NumChamp] == "")
		{
			if (champ_pair == 0 && NumChamp == NbrOfContent)
			{
				alert ("erreur: pas de donnée à injecter");
				//exit 0;
			}
			else
			{
				if (champ_pair == 2)
				{
					//libelle vierge
					champ_pair = 1;
					cell = document.createElement("td");
            		input = document.createElement("input");
            		input.setAttribute("type", "text");
            		input.setAttribute("value", content[NumChamp]);
            		cell.appendChild(input);
					row.appendChild(cell);
					cell = document.createElement("td");
					cell.setAttribute("align", "middle");
					cell.setAttribute("type", "image");
					cell.setAttribute("align", "middle");
					cell.setAttribute("border", "0");
					cell.setAttribute("onclick", "supprimerLigne(this.parentNode.rowIndex,\"TableauCodeLibelle\");");
					texte = document.createTextNode("Supprimer");
					cell.appendChild(texte);
					row.appendChild(cell);
					// ajoute la ligne à la fin du corps du tableau
					tablebody.appendChild(row);
				}
			}					
		}                 
		else
		{
			//var toto1 = content[NumChamp].match(/[0-9]{4}$/);
			var titi = content[NumChamp];
			var toto1 = content[NumChamp].match(/\)/);
			var toto = content[NumChamp].search(/\([0-9]{4}\)$/);
			if ( content[NumChamp].search(/\([0-9]{4}\)$/) > -1)
			{
				if (champ_pair == 2)
				{
					//libelle avec des données
					champ_pair = 1;
					cell = document.createElement("td");
            		input = document.createElement("input");
            		input.setAttribute("type", "text");
            		input.setAttribute("value", content[NumChamp]);
            		cell.appendChild(input);
					row.appendChild(cell);
					cell = document.createElement("td");
					cell.setAttribute("align", "middle");
					cell.setAttribute("type", "image");
					cell.setAttribute("align", "middle");
					cell.setAttribute("border", "0");
					cell.setAttribute("onclick", "supprimerLigne(this.parentNode.rowIndex,\"TableauCodeLibelle\");");
					texte = document.createTextNode("Supprimer");
					cell.appendChild(texte);
					row.appendChild(cell);
					// ajoute la ligne à la fin du corps du tableau
					tablebody.appendChild(row);
				}
				else
				{
					if (champ_pair == 2 && NumChamp == NbrOfContent)
					{
						alert ("erreur de donnée");
						//exit 1;
					}
				}						
			}
			else
			{
				// code
				champ_pair = 2;
				row = document.createElement('tr');
				cell = document.createElement("td");
        		input = document.createElement("input")
        		input.setAttribute("type", "text");
        		input.setAttribute("value", content[NumChamp]);
        		cell.appendChild(input);
				row.appendChild(cell);
			}
		}
    }
//création du corps du tableau contenant les éléments du formulaire
row = document.createElement("tr");
cell = document.createElement("td");
// définit l'input de la 1ère colonne du formulaire dans le tableau
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "code");
input.setAttribute("id", "code");
input.setAttribute("onpaste", "PasteCode(event)");
cell.appendChild(input);
row.appendChild(cell);
cell = document.createElement("td");
// définit l'input de la 2ème colonne du formulaire dans le tableau
input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "Libelle");
input.setAttribute("id", "Libelle");
cell.appendChild(input);
row.appendChild(cell);
cell = document.createElement("td");
cell.setAttribute("align", "middle");
bouton = document.createElement("button");
bouton.setAttribute("type", "button");
bouton.setAttribute("name", "Ajout");
bouton.setAttribute("onclick", "ajoutLigne(this.parentNode.rowIndex);");
texte = document.createTextNode("Ajout");
bouton.appendChild(texte);
// place <bouton> dans l'élément <td>
cell.appendChild(bouton);
// place les <td> dans l'élément <tr>
row.appendChild(cell);
// ajoute la ligne à la fin du corps du tableau
tablebody.appendChild(row);
}

Cordialement,
Vandman

**danielhagnoul** · 23/06/2016, 11h49

L'auteur de ce code emploie "document.createElement()" à de nombreuses reprises , il ne devrait donc avoir aucun problème pour créer une image.

Si le code est complet, il y a plusieurs variables non déclarées

**vandman** · 23/06/2016, 12h28

Bonjour,

Ca va mieux comme ca pour les déclarations de variable?

J'ai intégré les modifications que je ferais pour remplacer "Supprimer" par une image. Ce que je fais ne fonctionne pas. Ou est mon erreur?

Cordialement,
Vandman

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
function PasteCode(event)
{
	var PastedData = "";
    if (window.clipboardData && window.clipboardData.getData) // IE
        PastedData = window.clipboardData.getData('Text');
    else if (event.clipboardData && event.clipboardData.getData)
        PastedData = event.clipboardData.getData('text/plain');
 
	var form = document.getElementById("FormCodeLibelle");
	var input      = document.createElement("input");
    // récupère l'élément <table id='TableauCodeLibelle'> et l'élément <tbody id='tbodyCodeLibelle'>
    var table      = document.getElementById("TableauCodeLibelle");
    var tablebody      = document.getElementById("tbodyCodeLibelle");
    // -1 car nous retirons la ligne d'entête
    var DerniereLigneTableau = table.rows.length - 1;
    supprimerLigne(DerniereLigneTableau, "TableauCodeLibelle");
 
	// éclate les données dans un tableau, ici "content". Il s'agit d'une liste de données à une dimention.
    var content = PastedData.split(/[\t\r\n]/g);
 
    //content.length = nombre de valeur dans "content"nous retirons 1 car l'indice du tableau commence à 0
	var NbrOfContent = content.length - 1;
	// variable utilisé pour se positionner dans le tableau "content"
	var NumChamp = 0;
	var champ_pair = 0;
 
	//Nous sommes dans un tableau à 2 colonnes, le nombre de donnée présente doit être paire.
	//Pour avoir un nombre pair de donnée avec un indice commencant à 0, NbrOfContent doit être impair
	if (NbrOfContent % 2 == 0)
	{
		NbrOfContent++
		content[NbrOfContent] = "";
	}
	//Création du tabeau-formulaire
	for (NumChamp = 0; NumChamp <= NbrOfContent; NumChamp++)
    {
		var cell;
		if (content[NumChamp] == "")
		{
			if (champ_pair == 0 && NumChamp == NbrOfContent)
			{
				alert ("erreur: pas de donnée à injecter");
				//exit 0;
			}
			else
			{
				if (champ_pair == 2)
				{
					//libelle vierge
					champ_pair = 1;
					var cell = document.createElement("td");
            		var input = document.createElement("input");
            		input.setAttribute("type", "text");
            		input.setAttribute("value", content[NumChamp]);
            		cell.appendChild(input);
					row.appendChild(cell);
					var cell = document.createElement("td");
					cell.setAttribute("align", "middle");
					cell.setAttribute("type", "image");
					cell.setAttribute("align", "middle");
					cell.setAttribute("border", "0");
					cell.setAttribute("onclick", "supprimerLigne(this.parentNode.rowIndex,\"TableauCodeLibelle\");");
					var image = document.createElement("ImageSuppr");
					image.src = "/images/error.svg";
					image.alt = "Suprrimer Ligne";
					cell.appendChild(image);
					row.appendChild(cell);
					// ajoute la ligne à la fin du corps du tableau
					tablebody.appendChild(row);
				}
			}					
		}                 
		else
		{
			//var toto1 = content[NumChamp].match(/[0-9]{4}$/);
			var titi = content[NumChamp];
			var toto1 = content[NumChamp].match(/\)/);
			var toto = content[NumChamp].search(/\([0-9]{4}\)$/);
			if ( content[NumChamp].search(/\([0-9]{4}\)$/) > -1)
			{
				if (champ_pair == 2)
				{
					//libelle avec des données
					champ_pair = 1;
					var cell = document.createElement("td");
            		var input = document.createElement("input");
            		input.setAttribute("type", "text");
            		input.setAttribute("value", content[NumChamp]);
            		cell.appendChild(input);
					row.appendChild(cell);
					var cell = document.createElement("td");
					cell.setAttribute("align", "middle");
					cell.setAttribute("type", "image");
					cell.setAttribute("align", "middle");
					cell.setAttribute("border", "0");
					cell.setAttribute("onclick", "supprimerLigne(this.parentNode.rowIndex,\"TableauCodeLibelle\");");
					var image = document.createElement("ImageSuppr");
					image.src = "/images/error.svg";
					image.alt = "Suprrimer Ligne";
					cell.appendChild(image);
					row.appendChild(cell);
					// ajoute la ligne à la fin du corps du tableau
					tablebody.appendChild(row);
				}
				else
				{
					if (champ_pair == 2 && NumChamp == NbrOfContent)
					{
						alert ("erreur de donnée");
						//exit 1;
					}
				}						
			}
			else
			{
				// code
				champ_pair = 2;
				var row = document.createElement('tr');
				var cell = document.createElement("td");
        		var input = document.createElement("input")
        		input.setAttribute("type", "text");
        		input.setAttribute("value", content[NumChamp]);
        		cell.appendChild(input);
				row.appendChild(cell);
			}
		}
    }
//création du corps du tableau contenant les éléments du formulaire
var row = document.createElement("tr");
var cell = document.createElement("td");
// définit l'input de la 1ère colonne du formulaire dans le tableau
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "code");
input.setAttribute("id", "code");
input.setAttribute("onpaste", "PasteCode(event)");
cell.appendChild(input);
row.appendChild(cell);
var cell = document.createElement("td");
// définit l'input de la 2ème colonne du formulaire dans le tableau
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "Libelle");
input.setAttribute("id", "Libelle");
cell.appendChild(input);
row.appendChild(cell);
var cell = document.createElement("td");
cell.setAttribute("align", "middle");
var bouton = document.createElement("button");
bouton.setAttribute("type", "button");
bouton.setAttribute("name", "Ajout");
bouton.setAttribute("onclick", "ajoutLigne(this.parentNode.rowIndex);");
var texte = document.createTextNode("Ajout");
bouton.appendChild(texte);
// place <bouton> dans l'élément <td>
cell.appendChild(bouton);
// place les <td> dans l'élément <tr>
row.appendChild(cell);
// ajoute la ligne à la fin du corps du tableau
tablebody.appendChild(row);
}

**EddiGordo** · 23/06/2016, 14h23

Bonjour

L'élément pour créer un objet html avec "createElement" est une balise html.
Il n'existe pas de balise html nommée "ImageSuppr"...

Tu dois créer un élément de type "img" pour que ça puisse fonctionner comme tu l'entends.
Ensuite tu pourras éventuellement lui donner un id ou un name avec "ImageSuppr" comme valeur, si besoin.

Par exemple :

Code :

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

1
2
3
4
5
6
 
		var image = document.createElement("img");
		image.src = "/images/error.svg";
		image.alt = "Suprrimer Ligne";
                image.id = "ImageSuppr";
		cell.appendChild(image);

**vandman** · 23/06/2016, 15h05

Bonjour EddiGordo,

Pendant que tu postais la réponse, j'avais trouvé la même solution.

Merci

Cordialement,
Vandman

Remplacer du texte dans un tableau par une image

JavaScript

Discussions similaires

Partager

Partager