Votre question

Rendre cliquable l'entête d'un teblleau html

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
11 Janvier 2011 23:56:27

Bonsoir

J'ai un tableau html, et je voudrais rendre cliquable les entêtes des colonnes de mon tableau?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>deep</title>
  6. <style type="text/css">
  7. th {
  8. border: 0px none #039;
  9. background-color: #6c6c6c;
  10. font-size: 11px;
  11. color: #fafafa;
  12. font-family: Arial, Helvetica, sans-serif;
  13. text-align: left;
  14. }
  15.  
  16. th:hover {
  17. background-color: #00b3f3;
  18. }
  19.  
  20. table {
  21.  
  22. color: #FFF;
  23. border-top-style: none;
  24. border-right-style: none;
  25. border-bottom-style: none;
  26. border-left-style: none;
  27.  
  28. }
  29.  
  30. td {
  31. border-top-style: none;
  32. border-right-style: none;
  33. border-bottom-style: none;
  34. border-left-style: none;
  35. color: #666;
  36. font-family: Arial, Helvetica, sans-serif;
  37. font-size: 14px;
  38. }
  39. </style>
  40. </head>
  41.  
  42. <body>
  43. <table width="685" border="1" align="center" cellspacing="1">
  44. <tr>
  45. <th width="150" height="22" scope="col">Nom du compte</th>
  46. <th width="142" scope="col">Mot de passe</th>
  47. <th width="111" scope="col">Adresse I.P</th>
  48. <th width="149" scope="col">Date - Heure</th>
  49. <th width="99" scope="col">Action</th>
  50. </tr>
  51. <tr>
  52. <td>mtaattack@hotmail.com</td>
  53. <td>0000</td>
  54. <td>295.564.15.964</td>
  55. <td>25/12/2010 - 22h20</td>
  56. <td> </td>
  57. </tr>
  58. </table>
  59. </body>
  60. </html>


Merci de votre aide

Autres pages sur : rendre cliquable entete teblleau html

12 Janvier 2011 09:42:51

Bonjour rohan2,

La balise th gère l’évènement onclick[1], donc à moins que j'ai mal compris ton problème il suffit de faire :

  1. <th width="150" height="22" scope="col" onclick="javascript:alert('click sur l'entête Nom du compte ')" >Nom du compte</th>


[1] http://www.w3schools.com/tags/tag_th.asp
m
0
l
a c 232 L Programmation
12 Janvier 2011 10:46:09

Salut,

Sinon, si tu veux passer par quelque chose qui n'utilise pas de JavaScript, tu peux ajouter un <a href> dans chacun de tes <th>
Puis te débrouiller pour que le <a> prenne toute la place disponible à l'intérieur du <th>.
J'imagine qu'il doit falloir lui mettre les propriétés CSS: display:block; width:100%; height:100%; et ça devrait le faire
m
0
l
12 Janvier 2011 17:12:32

Bonjour
Oui en fait, ce que je voudrais faire, c'est trier les données de ma base de donnée lorsque je clique sur l'entête du tableau, donc j'utilise AJAX pour que ca soit fluide sans rafraichir la page.
J'imagine que ca doit être lors d'un évènement comme onclick qui appelle ma fonction js?
Merci de votre aide :) 
m
0
l
a c 232 L Programmation
12 Janvier 2011 17:24:08

Dans ce cas, si tu veux faire en AJAX, c'est mieux de s'attacher à l'évènement onclick de ton <th> comme l'a signalé Edyr
m
0
l
13 Janvier 2011 01:52:14

J'ai un autre soucis j'ai placé une image pour le bouton connexion et je voudrai lui mettre un hover, voici mon code css
  1. .bouton:hover{
  2. background-image:url(images/hover_03.png);
  3. width:61px;
  4. height:13px;
  5. }


et dans mon index.html j'ai mis
  1. <input name="submit" type="image" class="bouton" src="images/conecter_03.png" width="61" height="13" border=0/>

Mais j'ai aucun hover :( 
Voici le lien du site: http://csource.free.fr/tableau/
m
0
l
a c 232 L Programmation
13 Janvier 2011 09:55:11

C'est normal. Le style s'applique bien, mais un <input type="image"> ne met pas l'image en background-image.
Pas sûr que tu puisses le changer avec du CSS, il faudrait plutôt du javascript:
  1. <input name="submit" type="image" class="bouton" src="images/conecter_03.png" width="61" height="13" border="0" onmouseover="this.src=images/hover_03.png;" onmouseout="this.src=images/conecter_03.png;" />
m
0
l
a c 145 L Programmation
13 Janvier 2011 10:41:19

rohan21 a dit :
Bonjour
Oui en fait, ce que je voudrais faire, c'est trier les données de ma base de donnée lorsque je clique sur l'entête du tableau, donc j'utilise AJAX pour que ca soit fluide sans rafraichir la page.
J'imagine que ca doit être lors d'un évènement comme onclick qui appelle ma fonction js?
Merci de votre aide :) 

Si je puis me permettre une petite dérive, pourquoi n'utilises-tu pas un système qui existe déjà ?
Par exemple, avec JQuery et un plugin comme http://plugins.jquery.com/project/ARIASorTable ou http://plugins.jquery.com/project/pgrid tu as déjà une solution pratique et simple à mettre en place.
m
0
l
14 Janvier 2011 18:11:54

salut merci de vos réponse, pour répondre a Crazy, malheureusement je ne suis pas un as de javascript, et j'aimerais acquérir plus de connaissance en faisant tout moi même. ^^
Mais c'est sur que ce que tu m'a montré c'est le pied, mais bon tant que je ne sais pas maitrisé Jquery je pourrais pas avancer
m
0
l
a c 145 L Programmation
14 Janvier 2011 21:47:10

Je ne suis pas une bête en JS, je t'avoue que pour faire un tableau filtré et/ou ordonné, je pense tout d'abord PHP.
Mais depuis que j'ai découvert JQuery (par obligation), je trouve que c'est vraiment très bon, et ça s'apprend bien. Et surtout, ça évite de réinventer.
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS