11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Etant donné que les tableaux aux entête fixe sont une galère a gérer du moment que le contenu des colonnes peuvent varier, je me suis décidé il y a quelques années à faire un script JS pour retailler mon tableau à la bonne taille.

Néanmoins c'est un vieux script. Je voudrais savoir ce que vous en pensez et si vous avez des idées pour l'optimiser.

Voici comment celui-ci fonctionne :


function scrolltableau_simple(){
	var tableau_td = document.getElementById("tableau_stat_scroll").getElementsByTagName("td");
	var tableau_entete = document.getElementById("tableau_stat").getElementsByTagName("td");
	for(var i=0;i<tableau_entete.length-1;i++){
		if(tableau_entete[i].offsetWidth > tableau_td[i].offsetWidth){
			tableau_td[i].style.width = tableau_entete[i].offsetWidth-8+"px";			//-8 Car -2(cause border) et -6 pour les deux padding de 3px
		}else{
			tableau_entete[i].style.width = tableau_td[i].offsetWidth-8+"px";
		}
	}
}


Je l'appelle une fois le chargement terminé.

Dans le HTML cela nécéssite de faire les tableaux comme ceci :


<div id='scroll_tableau'>
<table id='tableau_stat_scroll'>
//mon tableau entete. Avec des td mais je pourrais y mettre des th et changement dans le JS
</table>
</div>
<div id='scroll_tableau2' style='overflow:auto;height:50px;'>
<table>
//Mon tableau avec mes données.
</table>
</div>


Je garde les deux <div> car dans le cas d'un tableau assez balese (comme ca m'arrive parfois) je suis obligé d'augmenter la taille de la div (genre a 10000px) pour pouvoir retaillé le tableau (sinon il peut pas dépasser la taille de la ou il est inclu).

Je rajoute aussi souvent dans le tableau entete un <td> de quelques pixel pour compenser le décalage avec la barre de scroll.

Qu'en pensez-vous ? J'utilise ce truc depuis bien longtemps et j'avoue ne pas vraiment m'être penché dessus depuis.[/i][/i][/i][/i][/i][/i]