Effacer un tableau généré dynamiquement
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:
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:
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:
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:
Citation:
ReferenceError: table is not defined
Merci par avance pour votre aide
