Discussion :

[fripette]

Bonjour a tous,
J'arrive a générer un tableau dynamiquement mais je ne sais pas comment faire pour enlever le tableau complètement (avec un bouton remove).
voila le code pour la generation du tableau

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 addTable(tblout) {
 
    var my1erTable = document.getElementById('myDynamicTable');
 
    var table = document.createElement('TABLE');
	table.style.width='100%';
 
	var alea = Math.random();
    table.setAttribute("id",alea);
 
    var header = table.createTHead();
    var row = header.insertRow(0); 
    var cell = row.insertCell(0);
    cell.innerHTML = "If you click on <i>add New Genome</i>, but you do not need it anymore, please leave this table <b>empty</b>";
 
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
    var cell0 = row.insertCell(0);
	cell0.width = "200" ;
	cell0.innerHTML =  'delete'; 	
    row.insertCell(1).innerHTML= '<input type="button" name="Delete" value="Delete" onclick="delRows(table.getAttribute(\'id\'))"/>';     
	row.bgColor = "#dddddd";
 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
	var cell1 = row.insertCell(0);
	cell1.width = "200" ;
	cell1.innerHTML =  'tax_id'; 	
    row.insertCell(1).innerHTML= '<input type="text" maxlength="20" size="20" value="" name="tax_id"/>';       
	row.bgColor = "#cccccc";
 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
	var cell2 = row.insertCell(0);
	cell2.width = "250" ;
	cell2.innerHTML = 'organism'; 	
    row.insertCell(1).innerHTML= '<input type="text" maxlength="60" size="60" value="" name="organism"/>'; 
    row.bgColor = "#dddddd";
 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
	var cell3 = row.insertCell(0);
	cell3.width = "250" ;
	cell3.innerHTML =  'strain'; 	
    row.insertCell(1).innerHTML= '<input type="text" maxlength="20" size="20" value="" name="strain"/>'; 
    row.bgColor = "#cccccc";
 
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
	var cell4 = row.insertCell(0);
	cell4.width = "250" ;
	cell4.innerHTML = 'source'; 	
    row.insertCell(1).innerHTML= '<input type="text" maxlength="20" size="20" value="" name="source"/>'; 
    row.bgColor = "#dddddd";
 
 
   	var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
 
	var cell6 = row.insertCell(0);
	cell6.width = "250" ;
	cell6.innerHTML =  'fasta file'; 	
    row.insertCell(1).innerHTML= '<input type="file" name="fasta_file"/>'; 
    row.bgColor = "#cccccc";
 
    if (tblout){
        var rowCount = table.rows.length;
	    var row = table.insertRow(rowCount);
 
		var cell7 = row.insertCell(0);
		cell7.width = "250" ;
		cell7.innerHTML =  'tblout file'; 	
	    row.insertCell(1).innerHTML= '<input type="file"  name="tblout_file"/>'; 
	    row.bgColor = "#cccccc";
    }
    var footer = table.createTFoot();
	var row = footer.insertRow(0);      
 
 
    my1erTable.appendChild(table);
 
}

Le tableau qui est genere en javascript contient deja le bouton delete (avec l'id du tableau passe en arguement).

Ce tableau est genere lors de l'appel par l'user:

Code html :

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

1
2
3
<div id="myDynamicTable">
 <input type="button" id="create" value="Add new Genome" onclick="Javascript:addTable(1)">
</div>

Enfin le code de la fonction delete :

Code :

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

1
2
3
4
5
6
7
8
function delRows(tableID) {
 
    myTBody = document.getElementById(tableID).getElementsByTagName('TBODY')[0];
 
    while (myTBody.getElementsByTagName('TR').length >= 1) {
        myTBody.deleteRow(0);
    }    
}

Je comprends le code d'erreur mais je ne sais pas comment y remedier:

ReferenceError: table is not defined

Merci par avance pour votre aide

[kakashi99]

hello,

si tu regardes le code généré une fois que tu as cliquer sur ton "add tableau" tu as ça :

Code html :

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

1
2
 
<input type="button" name="Delete" value="Delete" onclick="delRows(table.getAttribute('id'))">

hors, comme le dis si bien le message d'erreur "table" n'existe pas...

pour ne plus avoir ce message il faut que tu assigne directement la valeur de l'id quand tu génère le tableau.

Code :

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

1
2
 
row.insertCell(1).innerHTML= '<input type="button" name="Delete" value="Delete" onclick="delRows(' + table.getAttribute('id') + ')"/>';

ou mieux :

Code :

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

1
2
 
row.insertCell(1).innerHTML= '<input type="button" name="Delete" value="Delete" onclick="delRows(' + alea + ')"/>';

par contre, tu auras un autre problème : la fonction "delete" supprime tout ce qu'il y a dans le "tbody", mais j'ai l'impression que tu ne mets rien dans le "tbody".

[fripette]

Le message d'erreur a disparu mais pqs de reaction, pas de message d'erreur.
J'ai essaye de faire un alerte

Code :

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

1
2
3
4
5
6
7
8
function delRows(tableID) {
    alert(tableID);
    myTBody = document.getElementById(tableID).getElementsByTagName('TBODY')[0];
 
    while (myTBody.getElementsByTagName('TR').length >= 1) {
        myTBody.deleteRow(0);
    }    
}

et l'action arrive bien dans la partie delRows.
Une petite idee svp?

[kakashi99]

je te l'ai dit dans mon message, tu effaces les "row" qui sont dans "tbody", mais tu n'insère rien dans ton "tbody"... donc il n'y a rien à supprimer.

fais un clic droit sur ton tableau : "inspecter/examier l'élement" et tu verras.

de toute façon je te conseille de supprimer la tableau et non pas que son contenu, ton DOM restera propre comme ça.

[fripette]

Je comprends tu peux juste me montrer comment supprimer le tableau stp ?
Je suis desolee je suis une buse en javascript (je fais du perl au quotidien a la base).

Je pensais que cette ligne :
my1erTable.appendChild(table);

Me rajouter mon tableau au div existant et que c'etait suffisant.
Encore merci

[kakashi99]

il faut en fait supprimer l'élément depuis son parent... ^^

Code :

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

1
2
3
 
var tab = document.getElementById(tableID);
tab.parentNode.remove(tab);

[fripette]

Je vois.
Ca marche .... presque .

Malgre le fait que je ne passe que l'id que j'ai attribue a mon tableau.
Il efface tout le div (donc le bouton Add new genome et les autres eventuels tableaux existants).

Je comprends donc ce que tu dis par : supprimant depuis le parent.
Mais la ca supprime tout le parent.
Est ce que je ne dois pas utiliser un div ?

[kakashi99]

oups... ^^

Code :

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

1
2
...parentNode.removeChild...

[fripette]

Kakashi99 Merci !
d'avoir pris le temps de m'expliquer et de me répondre !
Je vais pouvoir me la péter auprès de mes collègues.