Affichage dynamique d'un tableau avec proprieté javascript

**delmarle** · 11/06/2009, 11h51

Bonjour je ne savais pas ou mettre mon problème étant donnée qu'il mélange surrement php javascrit, voila je suis un gros débutant et je doit réaliser pour un site une mise a jour de facon a ce que les news soit chacune dans un menu expand pour améliorer la lisibilité.

chaque titre et contenu de la news est lu via une base de donnée,
j'ai donc chercher a les afficher dynamiquement avec une boucle sur la création du tableau

seulement la propriété qui est censé faire expand sur chaque case du tableau ne marche que sur la première

voici le site de test
http://delmarle.org/dbtest/

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
 
<body>
 
<!-- Connection DB -->
<?php
mysql_connect("localhost", "monlog", "monpass");
mysql_select_db("test_News");
 
 
$reponse = mysql_query("SELECT * FROM test");
 
while ($donnees = mysql_fetch_array($reponse) )
{
?>
<div id="container">
	<div id="content">
 
		<ul class="listexpander">
			<li><?php echo $donnees['titre']; ?><br />
				<ul>
 
						<?php echo $donnees['contenu']; ?>			
 
				</ul>				
			</li>
 
		</ul>
	</div>
</div>
<?php
}       
                
                
 
 
mysql_close(); // Déconnexion de MySQL
?>	
 
</body>

voici le code javascript dans lequel je ne comprend que très peu de chose, je pense que mon problème viens de la(j'ai recuperer et modifié ce code)

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
this.listexpander = function(){
 
	// edit 
 
	var expandTo = 1; // level up to which you want your lists to be initially expanded. 1 is minimum
 
	var listClass = "listexpander" // class name that you want to assign to list(s). If you wish to change it make sure to update the css file as well  
 
	// end edit (do not edit below this line)
 
	this.start = function(){
		var ul = document.getElementsByTagName("ul");
		for (var i=0;i<ul.length;i++){
			if(ul[i].className == listClass){
				create(ul[i]);
				buttons(ul[i])
			};
		};
	};
 
	this.create = function(list) {	
		var items = list.getElementsByTagName("li");
		for(var i=0;i<items.length;i++){
			listItem(items[i]);
		};
	};	
 
	this.listItem = function(li){
		if(li.getElementsByTagName("ul").length > 0){
			var ul = li.getElementsByTagName("ul")[0];
			ul.style.display = (depth(ul) <= expandTo) ? "block" : "none";
			li.className = (depth(ul) <= expandTo) ? "expanded" : "collapsed";
			li.over = true;	
			ul.onmouseover = function(){li.over = false;} 
			ul.onmouseout = function(){li.over = true;} 
			li.onclick = function(){
				if(this.over){
					ul.style.display = (ul.style.display == "none") ? "block" : "none";
					this.className = (ul.style.display == "none") ? "collapsed" : "expanded";				
				};
			};
		};		
	};	
 
	this.buttons = function(list){
		var parent = list.parentNode;
		var p = document.createElement("p");
		p.className = listClass;
		var a = document.createElement("a");
		a.innerHTML = expandText;
		a.onclick = function(){expand(list)};
		p.appendChild(a);
		var a = document.createElement("a");
		a.innerHTML = collapseText;
		a.onclick = function(){collapse(list)};
		p.appendChild(a);
		parent.insertBefore(p,list);
	};
 
	this.expand = function(list){
		li = list.getElementsByTagName("li");
		for(var i=0;i<li.length;i++){
			if(li[i].getElementsByTagName("ul").length > 0){
				var ul = li[i].getElementsByTagName("ul")[0];
				ul.style.display = "block";
				li[i].className = "expanded";
			};
		};
	};
 
	this.collapse = function(list){
		li = list.getElementsByTagName("li");
		for(var i=0;i<li.length;i++){
			if(li[i].getElementsByTagName("ul").length > 0){
				var ul = li[i].getElementsByTagName("ul")[0];
				ul.style.display = "none";
				li[i].className = "collapsed";
			};
		};
	};
 
	this.depth = function(obj){
		var level = 1;
		while(obj.parentNode.className != listClass){
			if (obj.tagName == "UL") level++;
			obj = obj.parentNode;
		};
		return level;
	};	
 
	start();
 
};
 
window.onload = listexpander;

je suis un peu perdu la dedans si quelqu'un pourrait m'éclairer

**ledisciple** · 11/06/2009, 12h55

Envoyé par delmarle

Code :

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

$reponse = mysql_query("SELECT * FROM test");

houlà, je ne sais pas ce qu'est ce que code vraiment et pourquoi tu mélanges javascript et php mais j'ai détecté quelque chose qui me trouble :

Code :

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

1
2
 
$reponse = mysql_query("SELECT titre, contenu FROM test");

et pourquoi tu te sers de javascript pour faire un tableau? php le fait très bien !

**delmarle** · 11/06/2009, 13h11

est ce qu'on peut faire des tableau qui s'ouvrent et ferment ? il faut que les différent contenu puissent etre cachés indépendamment des autres

**ledisciple** · 11/06/2009, 13h39

Envoyé par delmarle

est ce qu'on peut faire des tableau qui s'ouvrent et ferment ? il faut que les différent contenu puissent etre cachés indépendamment des autres

moi ke te conseille plus d'utiliser le css !!
d'ailleurs t'en a de beaux exemples en cliquant sur le code source de cette page !! même si j'ai des doutes que ce soit que du css.

Tu peux faire déplacer ton message vers le forums javscript ou css en demandant à un gentil modérateur.

Affichage dynamique d'un tableau avec proprieté javascript

JavaScript

Discussions similaires

Partager

Partager