Affichage dynamique d'un tableau avec proprieté javascript
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:
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:
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
