Insertion balise "tr" automatiquement ???

Résolu/Fermé

SniP02 Messages postés 95 Date d'inscription samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 - 19 juil. 2010 à 13:43
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 - 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

A voir également:

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

2 réponses

Réponse 1 / 2

Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
20 juil. 2010 à 09:48

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 samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 5
21 juil. 2010 à 15:01

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 samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 5
22 juil. 2010 à 10:33

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 mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
22 juil. 2010 à 10:41

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 samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 5
22 juil. 2010 à 10:50

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 samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 5
22 juil. 2010 à 13:22

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 jeudi 10 juin 2010 Statut Membre Dernière intervention 22 juillet 2011 70
19 juil. 2010 à 15:25

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 samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 5
19 juil. 2010 à 17:02

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 jeudi 10 juin 2010 Statut Membre Dernière intervention 22 juillet 2011 70
20 juil. 2010 à 09:06

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

SniP02 Messages postés 95 Date d'inscription samedi 17 avril 2010 Statut Membre Dernière intervention 24 août 2010 5
20 juil. 2010 à 09:09

Je te remercie quand même pour ton aide.

Discussions similaires

la balise ou

ou ou

Balise

Faire sauter 2 lignes avec br (CSS)

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