à l'aide sur l'evenement onclick

Résolu/Fermé
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011 - 8 juil. 2011 à 12:55
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011 - 11 juil. 2011 à 14:52
Bonjour,

j'ai un tableau qui contien des boutons je veut changer la couleur du bouton clicker et conne je clicke sur un autre bouton le premier bouton prent ca couleur iniciale et le desieme bouton change de couleur voila mon code php:

<?php

for($j=0;$j<=5;$j++)
{
?>

<td align="center" border="1" width="420px" style=" border:1px color:#666666;text-decoration:none;background-color:#f2f6fb"><center>
<input type="submit" id="$j" name="Submit1" value="08h00" class="classe_button" ></input>
<input type="submit" id="$j" name="Submit2" value="08h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit3" value="08h40"class="classe_button"></input>
<input type="submit" id="$j" name="Submit4" value="09h00"class="classe_button"></input>
<input type="submit" id="$j" name="Submit5" value="09h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit6" value="09h40"class="classe_button"></input>
<input type="submit" id="$j" name="Submit7" value="10h00"class="classe_button"></input>
<input type="submit" id="$j" name="Submit8" value="10h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit9" value="10h40"class="classe_button"></input>
<input type="submit" id="$j" name="Submit10" value="11h00"class="classe_button"></input>
<input type="submit" id="$j" name="Submit11" value="11h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit12" value="11h40"class="classe_button"></input>
<input type="submit" id="$j" name="Submit13" value="13h00"class="classe_button"></input>
<input type="submit" id="$j" name="Submit14" value="13h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit15" value="13h40"class="classe_button"></input>
<input type="submit" id="$j" name="Submit16" value="14h00"class="classe_button"></input>
<input type="submit" id="$j" name="Submit17" value="14h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit18" value="14h40"class="classe_button"></input>
<input type="submit" id="$j" name="Submit19" value="15h00"class="classe_button"></input>
<input type="submit" id="$j" name="Submit20" value="15h20"class="classe_button"></input>
<input type="submit" id="$j" name="Submit21" value="15h40"class="classe_button"></input>
</center></td>

<?php
}
?>

</tr>
</table>


merci pour vos repances.

14 réponses

hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
8 juil. 2011 à 14:07
css !
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
8 juil. 2011 à 15:30
hervé56 j'ai pas compris ; réalisé ca on css ou en javascripte l'ésanciele que ca marche.
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
8 juil. 2011 à 19:44
c'est pas en javascript qu'on fait ca c'est en css normalement, par contre j'avais jamais vu tant de input submit a la suite ...
tu peux filer ton url qu'on puisse voir a quoi tout ca ressemble ?
0
fatehkap Messages postés 29 Date d'inscription jeudi 19 mai 2011 Statut Membre Dernière intervention 10 juillet 2011
8 juil. 2011 à 20:30
voila tu peut voire :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
if(isset($_GET["Samedi"])) // Une semaine précise est demandée
{
$ts = $_GET["Samedi"];
}
else //On prendra la semaine d'aujourd'hui
{


$diff = (date('w')+1) * 86400; //Différence en secondes par rapport au lundi - exemple : mercredi(2) * 86400
$ts = (time() - $diff); //On récupère le TimeStamp du lundi
}

//Initialisation des variables
$week = date('W', $ts); //Semaine en cours
$avant = $ts - 604800; //TimeStamp Lundi précédant = le ts du lundi - 60sec * 60min * 24h * 7jours
$apres = $ts +604800; //TimeStamp Lundi suivant = le ts du lundi + 60sec * 60min * 24h * 7jours




?>
<html>
<head>
<title>Calendrier par Semaine - Semaine </title>
<link type="text/css" rel="stylesheet" href="bouton.css">

</head>
<div align="center">
<a href="calendrier20.php?Samedi=<?php echo $avant;?>"><< présédent </a> Semaine <?php echo $week;?> <a href="calendrier20.php?Samedi=<?php echo $apres;?>">suivant >></a>
</div>
<body>
<table align="center" border="1" width="420px" style=" text-decoration:none;background-color:#f2f6fb">
<center> <tr>
<td align="center" width="14%"><b>Sam</b></td>
<td align="center" width="14%"><b>Dim</b></td>
<td align="center" width="14%"><b>Lun</b></td>
<td align="center" width="14%"><b>Mar</b></td>
<td align="center" width="14%"><b>Mer</b></td>
<td align="center" width="14%"><b>Jeu</b></td>


</tr></center>
<tr>
<?php
for($i=0;$i<=5;$i++)
{

?>
<td align="center" style="border:1px color:#666666">
<?php echo date('d / m Y', $ts);?>
</td>
<?php
$ts = $ts + 86400; //On passe au jour suivant car un jour = 60sec * 60min * 24h

}

?>
</tr>

<?php

for($j=0;$j<=5;$j++)
{
?>

<td align="center" border="1" width="420px" style=" border:1px color:#666666;text-decoration:none;background-color:#f2f6fb"><center>
<input type="submit" id="$j" value="08h00"class="classe_button"></input>
<input type="submit" id="$j" value="08h20"class="classe_button"></input>
<input type="submit" id="$j" value="08h40"class="classe_button"></input>
<input type="submit" id="$j" value="09h00"class="classe_button"></input>
<input type="submit" id="$j" value="09h20"class="classe_button"></input>
<input type="submit" id="$j" value="09h40"class="classe_button"></input>
<input type="submit" id="$j" value="10h00"class="classe_button"></input>
<input type="submit" id="$j" value="10h20"class="classe_button"></input>
<input type="submit" id="$j" value="10h40"class="classe_button"></input>
<input type="submit" id="$j" value="11h00"class="classe_button"></input>
<input type="submit" id="$j" value="11h20"class="classe_button"></input>
<input type="submit" id="$j" value="11h40"class="classe_button"></input>
<input type="submit" id="$j" value="13h00"class="classe_button"></input>
<input type="submit" id="$j" value="13h20"class="classe_button"></input>
<input type="submit" id="$j" value="13h40"class="classe_button"></input>
<input type="submit" id="$j" value="14h00"class="classe_button"></input>
<input type="submit" id="$j" value="14h20"class="classe_button"></input>
<input type="submit" id="$j" value="14h40"class="classe_button"></input>
<input type="submit" id="$j" value="15h00"class="classe_button"></input>
<input type="submit" id="$j" value="15h20"class="classe_button"></input>
<input type="submit" id="$j" value="15h40"class="classe_button"></input>
</center></td>

<?php
}
?>

</tr>
</table>


</body>
</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
8 juil. 2011 à 20:45
je crois bien que tu ne maitrises pas trop les bases donc c'est pour ca que tu es perdu..
essaie de suivre des tutos de débutants parsque la ton code est vraiment trop moche pour etre sauvé... :(
0
tu parles sur le tableau à cause des inputs après je vais les faire dans un tableau c'est pas un problème dit moi comment je change la couleur des boutons en clichons dessus c'est l'important
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
8 juil. 2011 à 21:30
c'est la base du css et des pseudo classes :HOVER

sinon si tu veux sur le onclick rajoute une fonction Js sur this qui modifie le style
et réinitialise celui des autres
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
9 juil. 2011 à 12:25
oui mais coment faire faire avec une function js donne moi un example svp
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
9 juil. 2011 à 14:18
liste tes elements avec un getelementbytagname
ensuite boucle sur ta var et affecte un evenement un peu comme ca
tonelement.onclick = function(){
this.style.backgroundColor = "#F00";
}
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
9 juil. 2011 à 16:11
ok je vais essayer ca hervé56 escuse moi pour l'orthographe
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
9 juil. 2011 à 16:13
dit moi hervé comment je liste mes elements c'est aven la function? un example plus claire svp
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
9 juil. 2011 à 16:16
j'ai modifier mon tableau j'ai mie un aray ta pas aimer les inputs hervé voila mon code:

$li = array (0=>'08:00',1=>'08:20',2=>'08:40', 3=>'09:00',4=>'09:20',5=>'09:40',6=>'10:00',7=>'10:20',8=>'10:40',9=>'11:00',10=>'11:20',11=>'11:40',12=>'13:00',13=>'13:20',14=>'13:40',15=>'14:00',16=>'14:20',17=>'14:40',18=>'15:00',19=>'15:20',20=>'15:40');

for ($i=0; $i<21; $i++)
{
echo "<tr>";

for ($j=0; $j<6; $j++)
{
echo '<td width="70" height="30">';

echo ('<input type="button" name="active" id="'.$j.$i.'" value="'.$li[$i].'" onclick=javascript:ch() />');
echo '</td>';
}
echo "</tr>";
}

echo "</table>";
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
Modifié par li2000 le 9/07/2011 à 16:38
et ce que c'est comsa :

<script language=javascript>
var cells = document.getElementsByTagName("$li");
for (var i = 0; i < 21; i++) {
cells.onclick = function(){
this.style.backgroundColor = "#F00";
}
}



</script>
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
9 juil. 2011 à 21:32
document.getElementsByTagName("li") te retourne un array...

donc ?
0
fatehkap Messages postés 29 Date d'inscription jeudi 19 mai 2011 Statut Membre Dernière intervention 10 juillet 2011
10 juil. 2011 à 13:53
oui et je te demande et ce que c'est comsa ?
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
10 juil. 2011 à 17:32
teste , si ca marche pas, c'est pas comme ca :)
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
10 juil. 2011 à 17:40
hervé56 je te remerci j'ai réglai le probleim il ami qui ma aider voisi comment:
css.
.bouton{
background-color:#f2f6fb;
}
.bouton_actif{
background-color:#7FFF00;
}

js:

boutonPrecedent="";

function changeCouleur(boutonClique)
{
if (boutonPrecedent!="")
{
document.getElementById(boutonPrecedent).className="bouton";
}
document.getElementById(boutonClique).className="bouton_actif";
boutonPrecedent=boutonClique;

}


Mais il y a un autre problème conne la couleur du bouton est changer et que l'utilisateur reclique sur ce bouton il revient pas à ça couleur initiale
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
10 juil. 2011 à 19:52
change tous ceux qui correspondent a la classe choisie et ensuite rechange celui qui est cliqué
0
li2000 Messages postés 18 Date d'inscription dimanche 26 juin 2011 Statut Membre Dernière intervention 12 juillet 2011
10 juil. 2011 à 20:16
j'ai pas bien compris ce que tu veut dire hervé
0
hervé56 Messages postés 269 Date d'inscription lundi 15 novembre 2010 Statut Membre Dernière intervention 25 mars 2017 10
10 juil. 2011 à 21:46
pourquoi tu essaie pas d'apprendre ce que tu fais ca irais mieu pask ca c'est la base... !
0