Ajout/Suppression dynamique des lignes dans une table

**codexomega** · 10/08/2005, 21h08

Bonjour.
Voici ce que je veux faire: j'ai un formulaire de gestion des enregistrements sous la forme d'une table HTML avec des champs texte.
Un bouton me permet d'ajouter une ligne a la fin de ma table et a gauche de chaque ligne il y a une boite a cocher. Quand je selectionne les boites a cocher et que je clique sur Delete Row, les lignes concernees disparaissent.
J'ai reussi d'ajouter les lignes, mais je ne peux pas recuperer et supprimer celles qui sont cochees.
Voici mon code:

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
<html>
<head>
function checkAll(form){
  for (var i = 1; i < form.elements.length; i++){    
    eval("form.elements[" + i + "].checked = form.elements[0].checked");  
  } 
}
 
//The new row function
var i=0;
function addRow() 
{ 
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0]; 
var row = document.createElement("TR"); 
//Cell 1
var cell1 = document.createElement("TD"); 
var inp1 =  document.createElement("INPUT"); 
inp1.setAttribute("type","checkbox"); 
inp1.setAttribute("name","list" + i);
inp1.setAttribute("value", i); 
cell1.appendChild(inp1); 
//Cell 2
var cell2 = document.createElement("TD"); 
cell2.setAttribute("align","center");
var inp2 =  document.createElement("INPUT"); 
inp2.setAttribute("type","text");
inp2.setAttribute("name","bmk_name" + i);
cell2.appendChild(inp2); 
//Cell 3
var cell3 = document.createElement("TD"); 
cell3.setAttribute("align","center");
var inp3 =  document.createElement("TEXTAREA"); 
inp3.setAttribute("name","bmk_description" +i);
inp3.setAttribute("cols","20");
inp3.setAttribute("rows","3");
cell3.appendChild(inp3); 
//Cell 4
var cell4 = document.createElement("TD"); 
cell4.setAttribute("align","center");
cell4.innerHTML="<select name='cbo_category' +i >" +
					"<option>Computer</option>" +
					"<option>Graphic Design</option>" +
					"<option>Electronic Libraries</option>" +
				"</select>";
//Cell 5
var cell5 = document.createElement("TD");
cell5.setAttribute("align","center"); 
cell5.innerHTML="<select name='cbo_language' +i >" +
					"<option>English</option>" +
					"<option>French</option>" +
					"<option>Russian</option>" +
				"</select>";
//Cell 6
var cell6 = document.createElement("TD"); 
cell6.setAttribute("align","center");
var inp6 =  document.createElement("INPUT"); 
inp6.setAttribute("type","text");
inp6.setAttribute("name","bmk_link" +i);
cell6.appendChild(inp6); 
//
row.appendChild(cell1); 
row.appendChild(cell2); 
row.appendChild(cell3); 
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
tbody.appendChild(row); 
i++;
//alert("i= " +i);
//alert(row.innerHTML); 
} 
 
function delRow(button) 
{ 
 
var row = button.parentNode.parentNode; 
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0]; 
tbody.removeChild(row); 
} 
 
</script>
</head>
 
<body>
<h1>Bookmarks Manager
</h1>
<hr />
<form name="form1" id="form1" method="post" action="">
<div>
  <input name="add_row" type="button" id="add_row" value="Add Row" onclick="addRow()" />
  <input name="del_row" type="button" id="del_row" value="Remove Row" onclick="delRow(this)"/>
</div>
<table  id="table1" width="100%"  border="1" cellpadding="0" cellspacing="0" align="center">
 <tbody>
  <tr>
    <th bgcolor="#660066"><input type="checkbox" name="list" value="check_all" onclick="checkAll(this.form)"/></th>
    <th bgcolor="#0000FF"><span class="style1">Name</span></th>
    <th bgcolor="#0000FF"><span class="style1">Description</span></th>
    <th bgcolor="#0000FF"><span class="style1">Category</span></th>
    <th bgcolor="#0000FF"><span class="style1">Language</span></th>
    <th bgcolor="#0000FF"><span class="style1">Link</span></th>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" name="list" value="1" /></td>
    <td align="center"><input type="text" name="bmk_name"/></td>
    <td align="center"><textarea name="bmk_description" cols="20" rows="3"></textarea></td>
    <td align="center">
		<select name="cbo_category" >
        	<option>Computer</option>
          	<option>Graphic Design</option>
          	<option>Electronic Libraries</option>
      	</select>
	</td>
    <td align="center">
		<select name="cbo_language">
        	<option>English</option>
          	<option>French</option>
          	<option>Russian</option>
          	<option>Afrikaans</option>
      	</select>
    </td>
    <td align="center"><input name="bmk_link" type="text" id="bmk_link" /></td>
  </tr>
  </tbody>
</table>
</form>
</body>
</html>

Merci d'avance !

[Modération: ajout des balises "code"]

**javatwister** · 11/08/2005, 09h17

d'après ce que tu écris, tu cherches à supprimer le formulaire en cliquant sur le bouton delete!
heureusement, le formulaire ne fait pas partie de table1, sinon, tu verrais disparaître à peu près toute ta page...

un conseil: pour ajouter / supprimer des lignes dans un tableau, passe par la propriété rows de l'élément table, non par des nodes; évite aussi de faire référence à tbody, balise un peu fantômatique...

**codexomega** · 11/08/2005, 15h16

Ce que je cherche à supprimer, c'est une ligne ou plusieurs lignes qui sont cochées à l'aide de checkbox. Ce que j'ai comme idée, cèest de parcourir le nombre de lignes cochées à l'aide de la boucle for et de les supprimer une à une. Mais je ne sais pas comment récupérer ce fameux nombre de checkbox qui sont cochés (checked).

La boucle for:
(for i=0; i<nb_checked;i++){
tbody.removeChild(chkbox_i.parentNode.parentNode);
}

En bref c'est ca.
Et, merci pour vos suggestions.

**codexomega** · 13/08/2005, 18h50

J'ai effectué plusieurs tests pour récuperer les checkboxes qui sont cochés. Qu'est-ce qui vous pensez? Essayez d'executer le code.
Vous verez que les lignes de la table s'ajoutent sans problèmes, à chaque fois qu'on clique sur le bouton Add Row. Ensuite, regardez la source de la page. Même si on voit 10 lignes sur la page, la source ne montre qu'une seule ligne, celle, qui existe par défaut.
Je ne sais plus quoi faire!
Totalemet désespéré

Ajout/Suppression dynamique des lignes dans une table

JavaScript

Discussions similaires

Partager

Partager