Tableau jQuery : Duplication de ligne / Fonction toggle
Bonjour, je début en js, j'ai d'ores et déjà réussi à créer un tableau comprenant des fonctions de rajout/suppression/copie de lignes.
Le problème, c'est qu'une fois que l'on rajoute une ligne ma fonction de "blocage de input fonctionne sur la 1ère ligne mais pas sur la nouvelle ligne créée car j'utilise un id alors forcément la fonction se rapporte a chaque fois au seul et unique input créée. Seulement j'aimerais avoir une identification par : document.getElementByClassName(NameBouton).disabled = false; -> est-ce possible ?
Ou par l'incrémentation d'un id ?
Si certaines personnes peuvent m'aider, j'en serais ravi. Merci.
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
| <html>
<head>
<title>Tableau dynamique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="javascript/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="css/on_off.css" type="text/css" />
<script type="text/javascript" language="javascript">
function clone(line, index)
{
newLine = line.cloneNode(true); //l'option selected des listes déroulantes n'est pas conservée lors du clonage
line.parentNode.appendChild(newLine);
}
function cloneEtVide(line, index)
{
newLine = line.cloneNode(true);
var mesInput = newLine.getElementsByTagName('INPUT');
var mesTextarea = newLine.getElementsByTagName('textarea');
var mesSelect = newLine.getElementsByTagName('select');
var mesSpan = newLine.getElementsByTagName('span');
for (i=0 ; i<= mesInput.length-1 ; i++) { if (mesInput[i].type == 'text') mesInput[i].value=""; }
for (i=0 ; i<= mesTextarea.length-1 ; i++) { mesTextarea[i].innerHTML = ""; }
for (i=0 ; i<= mesSelect.length-1 ; i++) { mesSelect[i].selectedIndex = 0; }
line.parentNode.appendChild(newLine);
}
function supprLigne(line)
{
line.parentNode.removeChild(line);
}
</script>
</head>
<body>
<div id="tab_dyna">
<table id="table1" border="1" cellspacing="0" cellpadding="0">
<tr id="1" class="trSpe">
<td>
<input type="text" id="boutonmagique" name="_1_1_2" size="16" maxlength="64"/>
<select name="_1_1_2_1_6_1"><OPTION value="">--<OPTION value="option 1">mg<OPTION value="option 2">g<OPTION value="option 3">kg</select>
<section id="stage">
<div class="slider-frame">
<span class="slider-button" onclick="GestionBouton(this.id, 'boutonmagique')" id="activationneur" value="Bloquer"> </span>
</div>
</section>
</td>
<td>
<input type="text" id="boutonmagique2" name="_1_1_2" size="16" maxlength="64"/>
<select name="_1_1_2_1_6_1"><OPTION value="">--<OPTION value="option 1">mg<OPTION value="option 2">g<OPTION value="option 3">kg</select>
<section id="stage">
<div class="slider-frame">
<span class="slider-button" onclick="GestionBouton(this.id, 'boutonmagique2')" id="activationneur" value="Bloquer"> </span>
</div>
</section>
</td>
<td> <input type="button" value="Copy" alt="Submit" onclick="clone(this.parentNode.parentNode, '_1_1_2');"/> </td>
<td> <input type="image" src="/css/img/logo_new.png" alt="Submit" onclick="clone(this.parentNode.parentNode, '_1_1_2');"/> </td>
<td> <input type="image" src="/css/img/logo_delete.png" alt="Submit" onclick="supprLigne(this.parentNode.parentNode);" /> </td>
</tr>
</table>
</div>
<script language="javascript">
function GestionBouton(IdLien, IdBouton)
{
StatutBouton = document.getElementById(IdBouton).disabled;
if(StatutBouton == true)
{
document.getElementById(IdBouton).disabled = false;
document.getElementById(IdLien).value = 'Bloquer';
}
else
{
document.getElementById(IdBouton).disabled = true;
document.getElementById(IdLien).value = 'Debloquer';
}
}
$('.slider-button').toggle(function(){
$(this).addClass('on').html('');
},function(){
$(this).removeClass('on').html('');
});
</script>
</body>
</html> |
