Onclick sur un tableau

Onclick sur un tableau - HTML/CSS - Programmation

Marsh Posté le 22-01-2008 à 15:35:28    

J'ai mon tableau (ex :

Code :
  1. <TABLE class=calendrier onclick='alert(this);'>

) qui contien plusieurs centaine de cases.  
Sur chaque case je voudrais pouvoir lancer une fonction grâce à l'événement onclick mais si je commence à mettre cet événement sur chaque balise TD je risque de surcharger ma page.
C'est pourquoi je me suis demandé s'il n'y avait pas un moyen de gérer cela avec 1 seul onclick sur la balise <TABLE> ? Ce système pourrait par exemple reconnaître la case qui est cliqué à l'aide de l'Id de la balise TD (la case).
 
Est-ce que c'est possible ? ou vaut mieux utiliser le javascript et créer les événement à l'ouverture de la page ?
 
D'avance merci


---------------
Le problème avec les idées derrière la tête c'est qu'on ne peut pas les voir :??:
Reply

Marsh Posté le 22-01-2008 à 15:35:28   

Reply

Marsh Posté le 22-01-2008 à 16:40:46    

C'est tiré par les cheveux ma demande  :D


---------------
Le problème avec les idées derrière la tête c'est qu'on ne peut pas les voir :??:
Reply

Marsh Posté le 22-01-2008 à 16:52:07    

C'est un peut stupide aussi, sans vouloir te vexer...
Impossible de faire de que tu veux avec un code comme onclick='alert(this);' ça n'a aucun sens.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 22-01-2008 à 16:59:26    

dwogsi a écrit :

C'est un peut stupide aussi, sans vouloir te vexer...
Impossible de faire de que tu veux avec un code comme onclick='alert(this);' ça n'a aucun sens.


 
Et autrement ?


---------------
Le problème avec les idées derrière la tête c'est qu'on ne peut pas les voir :??:
Reply

Marsh Posté le 22-01-2008 à 17:06:59    

Des onclick sur chaque cellule, ou si tu ne veux pas surcharger ton code html tu peux aussi "parcourir ton code avec js et y coller des onclick dynamiquement".


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 22-01-2008 à 20:26:23    

Code :
  1. <head>
  2. [...]
  3. <script type="text/javascript">
  4.  window.onload = function () {
  5.   installEventsOnMyFuckingTable();
  6.  }
  7.  function installEventsOnMyFuckingTable () {
  8.   var table = document.getElementsByTagName('table')[0]; // ou getElementById()
  9.   var tbody = table.getElementsByTagName('tbody')[0];
  10.   var _td = tbody.getElementsByTagName('td');
  11.   for (var i=0 ; i<_td.length ; i++) {
  12.    _td[i].onclick = function () {
  13.     alert(this.textContent);
  14.    }
  15.   }
  16.  }
  17. </script>
  18. </head>
  19. <body>
  20. [...]
  21. <table>
  22.  <caption>Super Table</caption>
  23.  <thead>
  24.   <tr>
  25.    <th>Col 1</th>
  26.    <th>Col 2</th>
  27.    <th>Col 3</th>
  28.   </tr>
  29.  </thead>
  30.  <tbody>
  31.   <tr>
  32.    <td>1</td>
  33.    <td>2</td>
  34.    <td>3</td>
  35.   </tr>
  36.   <tr>
  37.    <td>4</td>
  38.    <td>5</td>
  39.    <td>6</td>
  40.   </tr>
  41.   <tr>
  42.    <td>7</td>
  43.    <td>8</td>
  44.    <td>9</td>
  45.   </tr>
  46.   <tr>
  47.    <td>10</td>
  48.    <td>11</td>
  49.    <td>12</td>
  50.   </tr>
  51.  </tbody>
  52. </table>
  53. [...]

Reply

Marsh Posté le 24-01-2008 à 13:44:33    

Avec un framework JS (genre jQuery, YUI et tout), c'est assez simple à faire, via des fonctions genre addEvent qui gère facilement les évènements

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed