Récupérer le contenu d'une cellule et l'afficher

**elgeek** · 28/12/2012, 09h25

Bonjour à tous,
J'ai un tableau construit de la façon suivante :

Code php :

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
<table width="601" border="0" cellpadding="0" cellspacing="0" class="display" id="example">
        <thead style="background-color:#FFF">
          <tr>
            <th>Date</th>
            <th>Expediteur</th>
            <th>Objet</th>
            <th>Contenu</th>
            <th>Etat</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <?php
    while ($Ligne=mysql_fetch_object($res))
    { 
	?>
          <tr>
            <td><?php echo $Ligne->date; ?></td>
            <td><?php echo $Ligne->NomPrenom; ?></td>
            <td><?php echo $Ligne->objet; ?></td>
            <td id="contenu"><?php echo $Ligne->contenu; ?></td>
            <td><?php echo $Ligne->Etat; ?></td>
            <td><a id="opener">Voir</a> </td>
          </tr>
          <?php
    }
	?>
        </tbody>
        <tfoot>
          <tr>
            <th><input type="text" name="recherche_par_date" value="Recherche sur date" class="search_init" /></th>
            <th><input type="text" name="recherche_par_expediteur" value="Recherche par service" class="search_init" /></th>
            <th><input type="text" name="recherche_par_objet" value="Recherche par objet" class="search_init" /></th>
            <th><input type="text" name="recherche_par_contenu" value="Recherche par contenu" class="search_init" /></th>
          </tr>
        </tfoot>
      </table>
    </div>
 
 
<div id="dialog" title="Basic dialog">
    <p>???????????</p>
</div>

Je souhaite lors d'un clique sur une ligne, faire afficher dans une boite de dialogue le contenu de la ligne sélectionner... (l'idée est de récupérer la valeure de la colonne contenu sur la ligne sélectionnée pour pouvoir l'insérer ensuite dans ma div dialog..)

Je n'arrives pas à trouver une solution pour faire cela...une idée ?

Merci

**Bovino** · 28/12/2012, 09h40

Comme précisé dans Important : Les règles incontournables d'utilisation de ce forum, le code PHP est sans intérêt ! Merci de poster le HTML généré.
Qu'as-tu tenté de faire ? Parce que là, tu montres juste du code HTML + PHP mais pas l'ombre d'un début d'instruction JavaScript.
Répété un nombre incalculable de fois : un id doit être unique dans la page !

**elgeek** · 28/12/2012, 09h57

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../ckeditor/ckeditor.js" type="text/javascript"></script>
    <meta charset="utf-8" />
    <title>jQuery UI Tabs - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 
 
    <style type="text/css" title="currentStyle">
@import "media/css/page.css";
 @import "media/css/table.css";
 @import "media/css/custom-theme/overcast/jquery-ui-1.9.2.custom.css";
	/*@import "media/css/custom-theme/jquery-ui-1.8.11.custom.css";*/
</style>
 
   <script>
    // increase the default animation speed to exaggerate the effect
    $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode"
        });
 
        $( "#opener" ).click(function() {
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });
    </script>
    </head>
    <body>
    <div id="tabs" style="font-size:12px;font-family:Arial, Helvetica, sans-serif; padding-top:5px;">
      <table width="601" border="0" cellpadding="0" cellspacing="0" class="display" id="example">
        <thead style="background-color:#FFF">
          <tr>
            <th>Date</th>
            <th>Expediteur</th>
            <th>Objet</th>
            <th>Contenu</th>
            <th>Etat</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
                    <tr>
            <td>2012-12-27 15:35:04</td>
            <td>TOTO TITI</td>
            <td>dsf</td>
            <td id="contenu"><p>fsfsf</p>
</td>
            <td>0</td>
            <td><a id="opener">Voir</a> </td>
          </tr>
                  </tbody>
        <tfoot>
          <tr>
            <th><input type="text" name="recherche_par_date" value="Recherche sur date" class="search_init" /></th>
            <th><input type="text" name="recherche_par_expediteur" value="Recherche par service" class="search_init" /></th>
            <th><input type="text" name="recherche_par_objet" value="Recherche par objet" class="search_init" /></th>
            <th><input type="text" name="recherche_par_contenu" value="Recherche par contenu" class="search_init" /></th>
          </tr>
        </tfoot>
      </table>
    </div>
 
<div id="dialog" title="Basic dialog">
    <p>Ceci est un test</p>
</div>
 
<button id="opener">Open Dialog</button>
<input id="test" name="test" type="text" />            </div>
        </div>
    </body>
</html>

Désolé, voici le code HTML généré.

Je souhaite donc lors du clique sur une ligne, afficher le contenu de cette ligne dans une boite de dialogue

**danielhagnoul** · 28/12/2012, 21h27

Envoyé par Bovino

Comme précisé dans Important : Les règles incontournables d'utilisation de ce forum, le code PHP est sans intérêt ! Merci de poster le HTML généré.
Qu'as-tu tenté de faire ? Parce que là, tu montres juste du code HTML + PHP mais pas l'ombre d'un début d'instruction JavaScript.
Répété un nombre incalculable de fois : un id doit être unique dans la page !

"while ($Ligne=mysql_fetch_object($res))" va créer des ID identiques dans chaque ligne de la table !

Exemple :

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
        #users-contain { width: 350px; margin: 20px 0; }
        #users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        #users-contain table td, #users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>Titre 2</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<div id="tabs" style="font-size:12px;font-family:Arial, Helvetica, sans-serif; padding-top:5px;">
			<table width="601" border="0" cellpadding="0" cellspacing="0" class="display" id="example">
				<thead style="background-color:#FFF">
					<tr>
						<th>Date</th>
						<th>Expediteur</th>
						<th>Objet</th>
						<th>Contenu</th>
						<th>Etat</th>
						<th>Action</th>
					</tr>
		        </thead>
		        <tbody>
					<tr>
						<td>
							2012-12-27 15:35:04
						</td>
					    <td>
					    	TOTO TITI
					    </td>
					    <td>
					    	dsf
					    </td>
					    <td class="contenu"> <!-- Un ID doit être unique ! -->
					    	<p>
					    		fsfsf
					    	</p>
					    </td>
					    <td>
					    	0
					    </td>
					    <td>
					    	<a class="opener">Voir</a> <!-- Un ID doit être unique ! -->
					    </td>
					</tr>
					<tr>
						<td>
							2012-12-27 15:35:04
						</td>
					    <td>
					    	TOTO TITI
					    </td>
					    <td>
					    	dsf
					    </td>
					    <td class="contenu">
					    	<p>
					    		fsfsf
					    	</p>
					    </td>
					    <td>
					    	0
					    </td>
					    <td>
					    	<a class="opener">Voir</a> <!-- Un ID doit être unique ! -->
					    </td>
					</tr>
	            </tbody>
		        <tfoot>
					<tr>
						<th>
							<input type="text" name="recherche_par_date" value="Recherche sur date" class="search_init">
						</th>
						<th>
							<input type="text" name="recherche_par_expediteur" value="Recherche par service" class="search_init">
						</th>
						<th>
							<input type="text" name="recherche_par_objet" value="Recherche par objet" class="search_init">
						</th>
						<th>
							<input type="text" name="recherche_par_contenu" value="Recherche par contenu" class="search_init">
						</th>
					</tr>
		        </tfoot>
	      	</table>
    	</div>
 
    	<div id="dialog" title="Basic dialog">
    		<div id="users-contain"></div>
    	</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-10-31T20:41:57.21+01:00" pubdate>2012-10-31T20:41:57.21+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			 $( "#dialog" ).dialog({
	            autoOpen: false,
	            height: 220,
	            width: 500,
	            show: "blind",
	            hide: "explode"
	        });
 
	        $( "a.opener" ).click( function(){
 
	        	$( "#users-contain" ).html( 
	        		"<table class='ui-widget ui-widget-content'>" + 
	        		"<thead><tr class='ui-widget-header'>" +
	        			"<th>Date</th><th>Expediteur</th><th>Objet</th>" +
	        			"<th>Contenu</th><th>Etat</th><th>Action</th>" +
	        		"</tr></thead>" + 
	        		"<tbody>" + $( this ).parents( "tr" ).html() + 
	        		"</tbody></table>" );
 
	            $( "#dialog" ).dialog( "open" );
 
	            return false;
	        });
 
		});
 
		$(window).load(function(){
 
		});
	</script>
</body>  
</html>

Récupérer le contenu d'une cellule et l'afficher

jQuery

Vue hybride

Discussions similaires

Partager

Partager