Biblioscript.com : Générateur de tableaux

	<SCRIPT LANGUAGE=JavaScript> var nbre = Math.round(Math.random()10000); var chaine="<a href=http://www3.click-fr.com/clickj.cgi?a=1019-405664&b=" + nbre + " target=clickfr><img border=0 height=60 width=468 SRC=http://www3.click-fr.com/printj.cgi?a=1019-405664&b=" + nbre +" alt=\" Visitez notre Sponsor ! *\"></a>"; document.write(chaine); </SCRIPT> Membre de ClickFR, Reseau francophone Paie-Par-Click


- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]

	HTML 4

Tableaux

Générateur de tableaux

Compatibilite du script... a partir de :

Connexion ratee

	Fonction

		Si vous utilisez un éditeur HTML WYSIWYG, vous avez déjà un générateur de tableaux. Par contre, si vous travaillez directement dans le code, vous êtes obligé de tout taper vous même. Ce petit script vous permet de ne plus tout taper, mais de choisir les différents attributs de votre tableau pour en obtenir le code complet.

	Principe

		Des champs de saisie permettent de donner les différentes valeurs des attributs du tableau puis un JavaScript assemble un tableau en y intégrant vos valeurs, et affiche le code dans un champ texte, vous permettant de le reprendre facilement et de l'alimenter avec vos contenus. On utilise du JavaScript pour assembler les différents éléments du tableau et surtout prendre en compte la répétition des codes de cellules et de lignes.

	La méthode

dans la partie <head>

// On affecte les saisies à des variables pour plus de commodité

var cellspacing = document.formulaire.cellspacing.value;

var cellpadding = document.formulaire.cellpadding.value;

var width = document.formulaire.width.value;

var border = document.formulaire.border.value;

var lignes = document.formulaire.lignes.value;

var colonnes = document.formulaire.colonnes.value;

// Début de l'écriture du tableau dans le champ résultat

document.formulaire.resultat.value = '<table ';

// on affecte chaque variable à son attribut dans le tableau

document.formulaire.resultat.value += 'cellspacing="' + cellspacing + '" ';

document.formulaire.resultat.value += 'cellpadding="' + cellpadding + '" ';

document.formulaire.resultat.value += 'width="' + width + '" ';

document.formulaire.resultat.value += 'border="' + border + '">\n';

// on créé chaque ligne

for ( i = 0; i < lignes; i++ ) {

document.formulaire.resultat.value += '\t<tr>\n';

// on créé chaque colonne

for ( j = 0; j < colonnes; j++ ) {

document.formulaire.resultat.value += '\t\t<td></td>\n';

}

// fermeture de chaque ligne

document.formulaire.resultat.value += '\t</tr>\n';

}

// fermeture du tableau

document.formulaire.resultat.value += '</table>';
}
</script>

dans la partie <body>

<form name="formulaire">
Espace entre les cellules : <input type="text" name="cellspacing" size="5" value="0" OnFocus="this.select();">
Marge dans les cellules : <input type="text" name="cellpadding" size="5" value="0" OnFocus="this.select();">
Largeur tableau : <input type="text" name="width" size="5">
Bordure du tableau : <input type="text" name="border" size="5" value="0" OnFocus="this.select();">
Nombre de lignes : <input type="text" name="lignes" size="5">
Nombre de colonnes : <input type="text" name="colonnes" size="5">
<input type="button" value="Generer" OnClick="generer();"> <input type="reset" value="Effacer">
<textarea name="resultat" cols="50" rows="10"></textarea>
</form>

	Démonstration

	Téléchargement

Ce script est disponible en deux versions :

le script est intégré à la page où il agit,

le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.

Script intégré :

tableaux_generateur.zip
1 Ko

Script séparé :

tableaux_generateur2.zip
2 Ko


	Recherche


	CSS 2


	DHTML


	Javascript 1.3


	Références


	Aide générale


	statistiques