Tableau jQuery : Duplication de ligne / Fonction toggle

**clem91210** · 18/06/2014, 16h17

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 html :

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
<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>

**SpaceFrog** · 18/06/2014, 16h19

Quel est le rapport avec Jquery ?

**clem91210** · 18/06/2014, 16h22

Et bien j'utilise la bibliothèque jQuery pour avoir une utilisation multiplateforme. Je n'y connais franchement rien en js, j'aimerais simplement savoir comment conserver les fonctionnalités "disabled" lorsque que je rajoute une ligne à mon tableau ?