Avec un tableau classique, à l’ancienne du type :


 
<table id=’mon_tableau’> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr>
Etc…. 
</table>


j’avais besoin d’arriver à ça :

 
<table id=’mon_tableau’> 
<thead>
 <tr> 
   <th></th> 
   <th></th> 
   <th></th> 
   <th></th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
Etc… 
</tbody> 
</table>

c’est déjà un peu plus propre.

Donc voila le script du clef en main :

  1. Ajouter jquery dans vos header si ce n’est pas encore fait :
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript" type="text/javascript"></script>
  2. Copier ce code dans le header de votre page :
    /*formattage du tableau*/
    <script language="Javascript"> 
    jQuery(function() { 
    id_tableau= "#mon_tableau" ; 
    /*formattage du tableau*/ 
    $(id_tableau).find("tr:first").wrap("<thead>"); 
    $(id_tableau).find("thead:first").prependTo($(id_tableau)); 
    $(id_tableau).find("tr:first td").each(function(){ 
    content = $(this).html(); 
    largeur = $(this).width(); 
    $(this).replaceWith("<th width='"+largeur+"'>"+content+"</th>"); 
    }); 
    }); 
    </script>
  3. penser à changer l’id de votre tableau

et voila un beau tableau xhtml que je peux manipuler beaucoup plus facilement.

Si vous avez des commentaires, des idées d’améliorations ou des questions, n’hésitez pas à les poster en commentaires.




a faire : l’adapter en plugin