[html/javascript] Tableau dynamique scrollabl

Fermé
breizher - 23 août 2006 à 11:50
capitaineOrg Messages postés 7 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 31 juillet 2008 - 31 juil. 2008 à 10:52
Bonjour à tous,

Mon problème est le suivant:

Je désirerais générer dynamiquement un tableau html avec javascript qui soit scrollable au niveau du corps.

Le code suivant me génère mon tableau à 2 colonnes et à 20 lignes :
function create()
{
	
	var doc = document.getElementById('opTable');	
	var tr = document.createElement("TR");
	var tbody=document.createElement("TBODY")
	var thead=doc.createTHead();
	var tfoot=doc.createTFoot();	
	
	 var td2 = document.createElement("TD");
	td2.setAttribute("strong");
	td2.appendChild(document.createTextNode("colonne1"));
	tr.appendChild(td2);
   
	var td3 = document.createElement("TD");
	td3.setAttribute("strong");
	td3.appendChild(document.createTextNode("Colonne2"));
	tr.appendChild(td3);
	
	thead.appendChild(tr);		
	
	for(var j = 0; j < 40 ;j++)
	{
		var tr2 = document.createElement("TR");
		var td3=document.createElement("TD");
		var td4=document.createElement("TD");		
		td3.appendChild(document.createTextNode("1"));
		td4.appendChild(document.createTextNode("2"));
		
		tr2.appendChild(td3);
		tr2.appendChild(td4);
		tbody.appendChild(tr2);	
	}
	
	doc.appendChild(thead);
	doc.appendChild(tfoot);
	doc.appendChild(tbody);
    
}


Serait-il possible de le rendre scrollable ?

Merci d'avance pour vos réponses.
A voir également:

1 réponse

capitaineOrg Messages postés 7 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 31 juillet 2008 5
31 juil. 2008 à 10:52
salut

je remonte ce topic parceque j'aimerai bien comprendre cette exemple.
J'essai depuis un tableau (en cliquant sur une ligne) de générer un deuxieme tableau.
<script language="javascript" type="text/javascript">

function create()
{
	
	var doc = document.getElementById('tabl');	
	var tr = document.createElement("TR");
	var tbody=document.createElement("TBODY")
	var thead=doc.createTHead();
	var tfoot=doc.createTFoot();	
	
	 var td2 = document.createElement("TD");
	td2.setAttribute("strong");
	td2.appendChild(document.createTextNode("colonne1"));
	tr.appendChild(td2);
   
	var td3 = document.createElement("TD");
	td3.setAttribute("strong");
	td3.appendChild(document.createTextNode("Colonne2"));
	tr.appendChild(td3);
	
	thead.appendChild(tr);		
	
	for(var j = 0; j < 40 ;j++)
	{
		var tr2 = document.createElement("TR");
		var td3=document.createElement("TD");
		var td4=document.createElement("TD");		
		td3.appendChild(document.createTextNode("1"));
		td4.appendChild(document.createTextNode("2"));
		
		tr2.appendChild(td3);
		tr2.appendChild(td4);
		tbody.appendChild(tr2);	
	}
	
	doc.appendChild(thead);
	doc.appendChild(tfoot);
	doc.appendChild(tbody);
    
}

</script>

<table>

<thead>
	<tr>
		<th>id</th>
		<th>test</th>	
	</tr>
</thead>

	<tr  onclick="create();">
		<th>25</th>
		<th>?</th>		
	</tr>
	<tr  onclick="create();">
		<th>37</th>
		<th>?</th>		
	</tr>
</table>
	
<div id="tabl">

</div>


Quand il utilise
doc.createTHead();
ou
doc.createTFoot();
c'est un appel à une autre fonction?

J'apprends tout juste le javascript mais ca m'aiderait beaucoup de réussir cette exemple.
5