Peupler des inputs à partir d'un table sur l'évènement onclick d'une ligne

**Raptor92** · 09/04/2018, 09h28

Bonjour à Tous

Débutant en PHP, je bute depuis plusieurs jours sur ce problème
J'arrive bien à afficher mes données et créer un tableau, à survoler les lignes et à créer mes champs, mais je n'arrive pas à afficher les données d'une ligne dans les champs.
La partie OnClick ne fonctionne pas, et je n'arrive pas à identifier mon erreur
Puis-je avoir de l'aide de votre part
Bien à vous

Le code:

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
<!DOCTYPE html>
<html>
    <head>
	<th>ARTICLE List</th><br><br>
 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Mise en couleur de fond -->
		<body bgcolor='#F0F8FF'> 
		</body> 
		<!-- Mise en couleur de la ligne au survol & affichage du pointer -->
        <style>
            table tr:not(:first-child){
                cursor: pointer;transition: all .25s ease-in-out;
            }
            table tr:not(:first-child):hover{background-color: #ddd;}
        </style>
 
    </head>
    <body>
       <!-- Création des champs de saisis pour Update -->
        ID:<input type="text" name="id" id="id"><br>
        Ref:<input type="text" name="ref" id="ref"><br>
        Design:<input type="text" name="design" id="design"><br>
		Price:<input type="text" name="price" id="price"><br>
		Supplier:<input type="text" name="supplier" id="supplier"><br>
 
				<!-- Création de BTN -->
		        <button onclick="addHtmlTableRow();">Add</button>
                <button onclick="editHtmlTbleSelectedRow();">Edit</button>
                <button onclick="removeSelectedRow();">Remove</button>
 
        <table id="TAB_ART" border="1">
 
		<!-- Connexion & requête -->
        <?php
        $mysqli = new mysqli('localhost', 'root', 'root', 'simag_prod');
        $mysqli->set_charset("utf8");
                
        $requete = 'SELECT * FROM articles';
                
        $resultat = $mysqli->query($requete);
                
                $strOut = '<table>'.chr(13);
                
                // Contour du tableau -->
                $strOut = '<table border="1" width="650">'.chr(13);
                
 
        while ($ligne = $resultat->fetch_assoc()) {
 
                        
                //--Affichage des champs (champs de la table SQL)
                        $strOut.= '<tr>'.chr(13);
                $strOut.= '    <td>&nbsp;&nbsp;'.$ligne['art_id'].'</td>'.chr(13);
                $strOut.= '    <td>'.$ligne['art_ref'].'</td>'.chr(13);
                $strOut.= '    <td>&nbsp;&nbsp;&nbsp;&nbsp;'.$ligne['art_design'].'</td>'.chr(13);
                $strOut.= '    <td>&nbsp;&nbsp;&nbsp;&nbsp;'.$ligne['art_prix'].'</td>'.chr(13);
                $strOut.= '    <td>&nbsp;&nbsp;&nbsp;&nbsp;'.$ligne['art_four'].'</td>'.chr(13);
                
                $strOut.= '</tr>'.chr(13);
 
        }
                //--
                $strOut.='</table>';
                echo $strOut;
                //--
        $mysqli->close();
        ?>
        </table>
 
		<!-- Affichage dans les champs construit -->
        <script>
    
                var table = document.getElementById('TAB_ART');
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         //rIndex = this.rowIndex;
                         document.getElementById("id").value = this.cells[0].innerHTML;
                         document.getElementById("ref").value = this.cells[1].innerHTML;
                         document.getElementById("design").value = this.cells[2].innerHTML;
                                                 document.getElementById("price").value = this.cells[3].innerHTML;
                                                 document.getElementById("Supplier").value = this.cells[4].innerHTML;
                    };
                }
    
         </script>
 
    </body>
</html>

**Watilin** · 09/04/2018, 13h12

Salut,

il y a beaucoup trop de trucs à dire sur ton code. Je pense qu’il vaudrait mieux que tu commences par consulter des cours et des tutos sur HTML et JavaScript pour mettre tout ça au clair.

Dans l’immédiat, pour t’aider à régler ton problème, il y a les outils du navigateur. Appuie sur F12 pour ouvrir le panneau d’outils. Tu verras plusieurs onglets, il y en a principalement deux qui t’intéressent :

L’onglet inspecteur qui te permet de voir quelle structure le navigateur a construit à partir de ton code HTML. Tu verras qu’il fait beaucoup de corrections.
L’onglet console qui affiche les erreurs JavaScript (entre autres) et te permet d’évaluer des bouts de code JavaScript pour faire des tests.

Mon conseil avec JavaScript : dans un premier temps, évite le mot-clé this, il cause trop de confusion.

**Raptor92** · 09/04/2018, 13h29

Tout d'abord, merci pour votre réponse.
J'attends ce que vous me dites, mais je cherche juste à comprendre car je suis partie d'un code fonctionnel dans lequel j'ai inséré une requête, et de fait je ne trouve pas la différence

Voici le code de départ:

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
<!DOCTYPE html>
<html>
    <head>
        <title>Display Selected HTML Table TR Values In Input Text</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <style>
            table tr:not(:first-child){
                cursor: pointer;transition: all .25s ease-in-out;
            }
            table tr:not(:first-child):hover{background-color: #ddd;}
        </style>
 
    </head>
    <body>
 
        First Name:<input type="text" name="fname" id="fname"><br><br>
        Last Name:<input type="text" name="lname" id="lname"><br><br>
        Age:<input type="text" name="age" id="age"><br><br>
 
        <table id="table" border="1">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
 
            <tr>
                <td>FN1</td>
                <td>LN1</td>
                <td>10</td>
            </tr>
 
            <tr>
                <td>FN2</td>
                <td>LN2</td>
                <td>20</td>
            </tr>
 
            <tr>
                <td>FN3</td>
                <td>LN3</td>
                <td>30</td>
            </tr>
 
            <tr>
                <td>FN4</td>
                <td>LN4</td>
                <td>40</td>
            </tr>
 
            <tr>
                <td>FN5</td>
                <td>LN5</td>
                <td>50</td>
            </tr>
        </table>
 
        <script>
    
                var table = document.getElementById('table');
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         //rIndex = this.rowIndex;
                         document.getElementById("fname").value = this.cells[0].innerHTML;
                         document.getElementById("lname").value = this.cells[1].innerHTML;
                         document.getElementById("age").value = this.cells[2].innerHTML;
                    };
                }
    
         </script>
 
    </body>
</html>

Et je suis d'accord, cela ne m'absous pas des tutos

**Watilin** · 09/04/2018, 15h03

Peux-tu afficher lle code généré par PHP en faisant Ctrl+U dans ton navigateur, et me le montrer ?

De plus, les boutons que tu as ajoutés :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<button onclick="addHtmlTableRow();">Add</button>
<button onclick="editHtmlTbleSelectedRow();">Edit</button>
<button onclick="removeSelectedRow();">Remove</button>

Leurs attributs onclick appellent des fonctions qui n’existent pas. Normalement tu devrais voir une erreur dans la console lorsque tu cliques dessus.

**Raptor92** · 09/04/2018, 15h18

Le voici .... et merci mille fois

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html>
	<table width="120">
	<th>Article List</th>
	<tr><td><hr></td></tr>	
	<!-- Titre et Btn de retour Home Page -->
	<td class="Article List"><a href="accueil.php" target="page">Home Page</a></td></tr>
	<table>
	<!-- Mise en couleur de fond -->
	<body bgcolor='#F0FFFF'> 
	</body> 
    <head>
        <meta charset="utf-8">
        <style>
                        <!-- Mise en couleur de la ligne au survol -->
            table tr:not(:first-child){
                cursor: pointer;transition: all .25s ease-in-out;
            }
            table tr:not(:first-child):hover{background-color: #ddd;}
        </style>
 
    </head>
    <body>
			<!-- Création des champs de saisis -->
	        Reference:<input type="text" name="fname" id="fname" ><br>
			Design   :<input type="text" name="lname" id="lname"><br>
			Prix     :<input type="text" name="age" id="age"><br>
			Supplier :<input type="text" name="Supplier" id="Supplier"><br><br>
<table id="table" border="1">
 
 
	<title>Article List</title>
 
        <table border="1" width="650">
<tr>
    <td>&nbsp;&nbsp;1</td>
    <td>SERV1</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Serveur restaurant</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;287.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;DELL</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;2</td>
    <td>MH33</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Routeur</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;185.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;MERAKY</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;3</td>
    <td>ECR10</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Tablette Ecran 10</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;90.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Samsung</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;4</td>
    <td>ZONE1</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Deplacement Paris Intra</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;75.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;AWADAC</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;5</td>
    <td>ZONE2</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Deplacement IDF</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;105.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;AWADAC</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;6</td>
    <td>ZONE3</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Deplacement hors IDF</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;175.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;AWADAC</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;7</td>
    <td>Micro USD 1m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Cable micro USB 1m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;3.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Legrand</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;8</td>
    <td>Micro USB 2 m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Cable micro USB 2 m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;6.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Legrand</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;9</td>
    <td>micro USB 3 m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Cable micro USB 3 m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;8.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Legrand</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;10</td>
    <td>CAM 360</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Camera IA 360 
</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;675.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;AXIS</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;11</td>
    <td>ECRAN 12</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Tablette 12</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;120.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Samsung</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;12</td>
    <td>ELO 10</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Ecran 10 </td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;324.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Elo Touch</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;13</td>
    <td>ELO 12</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Ecran 12 Elo Touch</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;540.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Elo Touch</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;14</td>
    <td>RJ45 1m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Cable RJ45 CAT6 1m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;5.25</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;15</td>
    <td>RJ45 2m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Cable RJ45 CAT6 2m</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;6.75</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
    <td>&nbsp;&nbsp;16</td>
    <td>swatch3.0</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;Montre swatch 3.0</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;165.00</td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;SWATCH</td>
</tr>
</table>			<!-- Récupération des données par click -->
	        <script>
    
                var table = document.getElementById('table');
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                         //rIndex = this.rowIndex;
                         document.getElementById("fname").value = this.cells[0].innerHTML;
                         document.getElementById("lname").value = this.cells[1].innerHTML;
                         document.getElementById("age").value = this.cells[2].innerHTML;
                                                 document.getElementById("Supplier").value = this.cells[3].innerHTML;
                    };
                }
    
         </script>
    </body>
</html>

Pour les boutons, on peux les supprimer, ce n'est pas la priorité

**Watilin** · 09/04/2018, 15h45

Comme je le soupçonnais, c’est un problème dû à ta structure HTML. Dans ta console, tape ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("table");

Ça devrait te renvoyer l’élément, avec un bouton pour l’observer dans l’onglet inspecteur.
Tu verras qu’il contient une autre table, et à cause de cette autre table, les références à table.rows[i] ne sont pas correctes.

Supprime cette table parasite et ça devrait marcher.

Peupler des inputs à partir d'un table sur l'évènement onclick d'une ligne

JavaScript

Vue hybride

Discussions similaires

Partager

Partager