Insertion balise "tr" automatiquement ???

Résolu

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention -
Defouille Messages postés 388 Date d'inscription Statut Membre Dernière intervention - 22 juil. 2010 à 14:03

Bonjour a tous,

Je voudrais savoir si une solution existe pour que des balise <tr></tr> s'ajoute automatiquement dans un code.

Par exemple :

<html>
     <head>
          ...
     </head>
     <body>
          <div id="tableau" >
               <table>
                         <td>Cellule0:0</td>
                         <td>Cellule0:1</td>
                         <td>Cellule0:2</td>
                         <td>Cellule0:3</td>
                         <td>Cellule0:4</td>
                         <td>Cellule1:0</td>
                         <td>Cellule1:1</td>
                         <td>Cellule1:2</td>
                         <td>Cellule1:3</td>
                         <td>Cellule1:4</td>
                         <td>Cellule2:0</td>
                         <td>Cellule2:1</td>
                         <td>Cellule2:2</td>
               </table>
          </div>
     </body>
</html>

Dans ce code je voudrais que les balises <tr></tr> regroupent les balises <td></td> par 5 automatiquement :

...
     <table>
          <tr>
               <td>Cellule0:0</td>
               <td>Cellule0:1</td>
               <td>Cellule0:2</td>
               <td>Cellule0:3</td>
               <td>Cellule0:4</td>
          </tr>
          <tr>
               <td>Cellule1:0</td>
               <td>Cellule1:1</td>
               <td>Cellule1:2</td>
               <td>Cellule1:3</td>
               <td>Cellule1:4</td>
          </tr>
          <tr>
               <td>Cellule2:0</td>
               <td>Cellule2:1</td>
               <td>Cellule2:2</td>
          </tr><!--Il est possible que le dernier groupe contienne moins de 5 "td"-->
     </table>
...

J'espère que vous comprenez et que vous connaissez la solutions.

Merci

Afficher la suite

A voir également:

Insertion balise "tr" automatiquement ???
Insertion sommaire word - Guide
Touche insertion clavier - Guide
Insertion filigrane word - Guide
Insertion liste déroulante excel - Guide
Insertion signature word - Guide

2 réponses

Réponse 1 / 2

Defouille Messages postés 388 Date d'inscription Statut Membre Dernière intervention 54

Bonjour,

tu dis être intéressé par d'autres solutions qui te permettent d'avoir ton tableau bien formé quand tu ajoutes une vidéo :)

voila une fonction à appeler au chargement de la page qui te fabrique un tableau, il faut juste ajouter une ligne dans le tableau "cellules" pour ta nouvelle vidéo.

JAVASCRIPT :

<script type="text/javascript">
	
	var NB_CELLULES_LIGNE = 5 ;
	
	var cellules = new Array();
	cellules[0] = "case 1";
	cellules[1] = "case 2";
	cellules[2] = "case 3";
	cellules[3] = "case 4";
	cellules[4] = "case 5";
	cellules[5] = "case 6";
	cellules[6] = "case 7";
	// ...
	
	function init()
	{
		var tableau = document.getElementById('tableau');
		var count = 0 ;
		var new_inner='';
		
		for(var i=0 ; i<cellules.length ;i++)
		{
			if(count % NB_CELLULES_LIGNE == 0)
			{
				if(count > 0)
					new_inner += '</tr>\n'
				new_inner += '<tr>\n'
			}
			new_inner +='<td>'+cellules[i]+'</td>\n';
			count++;
		}
		new_inner += '</tr>\n'
		
		tableau.innerHTML = new_inner ;
	}
</script>

HTML :

<table id="tableau">
</table>

Il suffit de remplacer "case 1" par ton code html d'affichage de ta vidéo, enfin ce que tu veux mettre dans la case quoi ^^.

Voila, en espérant que ça te soit utile :)

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention 5

Bonjour Defouille,

C'est exactement le code que je cherche, je te remercie énormément, sujet résolu.

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention 5

Juste une dernière petite question. Le code ci-dessus donne bien le résultat que je voulais mais quand je modifie "case 1", "case 2",... avec des balises qui contiennent des "chiffres" ou des " \ " cela ne sont pas recopier correctement dans le code html.
Exemple :

Le Javascript :

var Cellules = new Array();
     Cellules[0] = '<a href="Fichiers\12Rounds.avi"><img src="Fichiers\12Rounds.png" /></a><br />12 Rounds';

Affiche ceci en Html :

<table id="tableau"><tbody><tr>
     <td><a href="Fichiers%0ARounds.avi"><img src="Fichiers%0ARounds.png"></a><br>12 Rounds</td>

Comme vous pouvez le voir :
"<a href="Fichiers\12Rounds.avi">" devient
"<a href="Fichiers%0ARounds.avi">"

Par contre les chiffres qui ne sont pas dans des balises sont correctement recopier. Comme "12 Rounds" juste avant "</td>".

Quelqu'un aurait-il la solution a ce petit problème svp ?

Merci.

Defouille Messages postés 388 Date d'inscription Statut Membre Dernière intervention 54

le caractère "\" est dangereux :p
il sert a échapper d'autres caractères, du coup quand tu écris "\12", l'interpréteur pense que tu veux échapper 12 et il affiche le code ascii de 12.

La solution, traiter le mal par le mal en échappant le "\" !

Essaye avec :

var Cellules = new Array();
     Cellules[0] = '<a href="Fichiers\12Rounds.avi"><img src="Fichiers\\12Rounds.png" /></a><br />12 Rounds';

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention 5

Bonjour Defouille,

Avec \\ j'obtiens ceci :

Java :

<a href="Fichiers\\12Rounds.avi">

affiche Html

<a href="Fichiers%5C12Rounds.avi">

Incroyable mais vrai le lien fonctionne quand même malgré ces truc lol "%5C"

Encore merci Defouille t'es mon petit génie.

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention 5

Petit commentaire :

Pour ne pas à avoir a changé tous les chiffres de "cellules[...]" chaque fois qu'une vidéo et ajouter en milieu de liste il suffit de rajouter et modifier ce qui est en italique/souligné au code :

Javascript :

<script type="text/javascript">
	
	var NB_CELLULES_LIGNE = 5 ;
	var cellules = new Array() ;

	var i = 0 ;
	cellules[i++] = "case 1" ;
	cellules[i++] = "case 2" ;
	cellules[i++] = "case 3" ;
	cellules[i++] = "case 4" ;
	cellules[i++] = "case 5" ;
	cellules[i++] = "case 6" ;
	cellules[i++] = "case 7" ;
	// ...

Voila en espérant que sa sera utile, personnellement mon code est au top pour ma bibliothèque.
Encore merci à Defouille

Réponse 2 / 2

Leviathan49 Messages postés 257 Date d'inscription Statut Membre Dernière intervention 70

Sans trop réfléchir je dirais d'utiliser les modulo avec un peu de php : ex :

echo "<tr>";
$i=0;
foreach($cellules as $cellule)
{
   if($i%5 == 0 && i!=0)
   {
      echo "\n</tr>\n<tr>\n";
   }
   echo "<td>".$cellule."</td>\n"
   $i++;
}
echo "</tr>\n";

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention 5

Bonjour Leviathan,
Merci de ta réponse mais je cherche plutôt un code en javascript car cette page restera sur mon bureau et ne sera pas mise sur internet, donc pour ne pas devoir stimulé un serveur (Wampserver,...) le javascript serait plus approprié.

En fête j'ai besoin de ce code pour garder une bibliothèque que j'ai créer dans l'ordre alphabétique, chaque fois que je rajoute une vidéo a ma bibliothèque sa me crée un groupe de 6 sur la même ligne, et pour revenir à 5 par ligne, je dois décalé tous les </tr><tr> d'un cran.

Même si tu as une autre solution pour que je puisse gardé cette bibliothèque dans l'ordre alphabétique tous en ajoutant de nouvelles vidéos régulièrement.

Je mets une prise de vue de la bibliothèque en question : ici

Leviathan49 Messages postés 257 Date d'inscription Statut Membre Dernière intervention 70

Malheureusement, je ne m'y connais pas suffisamment en JavaScript pour pouvoir t'aider ^^"

SniP02 Messages postés 95 Date d'inscription Statut Membre Dernière intervention 5

Je te remercie quand même pour ton aide.

Discussions similaires

Sa veux dire koi??Subject: FW: Tr :FW: TR: TR

Votre réponse

Discussions similaires