Ajout/Suppression dynamique des lignes dans une table
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:
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"]
