Accueil > Forum > > > > Creation dynamique d'un tableau en HTML
 Creation dynamique d'un tableau en HTML
lundi 16 avril 2007 à 17:29:09 |
Creation dynamique d'un tableau en HTML
AllalcoolG
|
Bonjour,
j'aimerais savoir s'il est possible d'ajouter des lignes à un tableau existant en HTML.
En fait j'ai un script vbs qui me permet de retourner de retourner des données en fonction d'un fichier *.text
ex si le fichier contient 40 lignes alors j'aimerais que mon tableau HTML en fasse 40 aussi
Merci de votre aide
|
|
lundi 16 avril 2007 à 18:11:08 |
Re : Creation dynamique d'un tableau en HTML
PetoleTeam
|
B
onjour...
Connait pas le vbs mais on peut procéder de la façon suivante en dynamique à l'ouverture de la page, dans le body donc...
<script type="text/javascript">
//-- Lecture Nombre de ligne
NbrLigne = Ta_Fonction();
//-- Creation du tableau
var Html = '<table>';
//-- Ajout des lignes
for( var i = 0; i <NbrLigne; i++)
Html += '<tr><td>.....<\/td><\/tr>';
Html += '<\/table>';
//-- Ecriture dans document
document.write( Html);
</script>
...la suite du body...
Pas sur que cela réponde à ton besoin.
;0)
|
|
lundi 16 avril 2007 à 18:46:08 |
Re : Creation dynamique d'un tableau en HTML
stfou
|
Bonjour, PetoleTeam >> Pas très élegant tout ça...
var tableau=document.createElement("table");
for(i=0;i<ligne;i++){tableau.insertRow()};
document.body.appendChild(tableau);
En supposant que le nombre de ligne est contenu dans la variable ligne.
STFOU
|
|
lundi 16 avril 2007 à 18:48:57 |
Re : Creation dynamique d'un tableau en HTML
|
lundi 16 avril 2007 à 19:41:21 |
Re : Creation dynamique d'un tableau en HTML
PetoleTeam
|
Pas très élégant, je le concéde mais sans plus d'indication c'est une approche...
Pour être plus élégant il va de soit qu'il faut, sur le onload du body par exemple, appeler la fonction Insert_Tableau()
Et pour être presque complet il convient de réaliser cela en DOM compatible à savoir
//-----------------------
function Insert_Tableau(){
var NbCol = 4; // par exemple
var NbLig = 10; // par exemple
//-- Creation de la TABLE
var O_Tab = document.createElement("table");
//-- Creation des Lignes
for( var i =0; i < NbLig; i++){
O_Tr = O_Tab.insertRow(-1); // -1 pour insertion à la suite
//-- Creation des Colonnes
for( var j =0; j < NbCol; j++){
O_Td = O_Tr.insertCell(j); // j pour insertion à la suite
//-- On met le texte eventuel
O_Td.innerHTML = 'Lig ' +i +' Col ' +j;
}
}
//-- On ajoute au BODY
document.body.appendChild(O_Tab);
}
Voila avec cela notre ami AllalcoolG devrait pouvoir résoudre son problème...
;0)
|
|
mardi 17 avril 2007 à 15:00:56 |
Re : Creation dynamique d'un tableau en HTML
AllalcoolG
|
La fonction Insert_Tableau marche top.
Petite question : Comment faire pourque le texte soit en gras et que les brodures soit visible et de couleur par exemple rouge?
|
|
mardi 17 avril 2007 à 17:19:25 |
Re : Creation dynamique d'un tableau en HTML
PetoleTeam
|
B
onjour...
Plusieures solutions possibles mais en voici une qui utilise les styles...
1/ dans le <head></head> ajout du style, c'est un exemple
<style type="text/css">
#la_table td{
color : #000000;
font-size : 13px;
font-weight : bold;
font-family : Verdana;
padding : 5px;
margin : 5px;
border: 1px solid #ff0000;
}
</style>
2/ dans la fonction Insert_Tableau() ajout de la ligne après appendChild
//-- On ajoute au BODY
document.body.appendChild(O_Tab);
O_Tab.id = "la_table"; // ajout id pour affectation du style
Voila that's all folks !
;0)
|
|
mardi 17 avril 2007 à 17:53:09 |
Re : Creation dynamique d'un tableau en HTML
AllalcoolG
|
J'arrive donc a contruire mon tableau avec ma mise en page ex 5 lignes et 3 colonnes
Des lors que le tableau est crée et s'affiche sur le navigateur, est il possible par la suite de changer des valeurs dedans.
ex ligne 3 colonne 2 = "Toto" --> aprés valiadaion sur un bouton changer Toto en Momo
|
|
mardi 17 avril 2007 à 18:06:21 |
Re : Creation dynamique d'un tableau en HTML
PetoleTeam
|
Tu es un heureux veinard, j'ai une fonction toute faite je te la livre...
//-------------------------------------------
function Modif_Valeur( id_, lig_, col_, val_){
var Obj = document.getElementById( id_);
var Nb_Ligne = Obj.rows.length;
if( lig_ <= Nb_Ligne){
var Nb_Col = Obj.rows[lig_].cells.length;
if( col_ <= Nb_Col){
Obj.rows[lig_].cells[col_].innerHTML = val_;
}
}
}
avec un appel du style
Modif_Valeur('la_table', 5, 5, 'Toto')
tu n'as plus qu'a adapter...
;0)
|
|
mardi 17 avril 2007 à 18:09:28 |
Re : Creation dynamique d'un tableau en HTML
|
Cette discussion est classée dans : dynamique, tableau, lignes, html, creation
 Répondre à ce message
 Sujets en rapport avec ce message
Ajout de lignes dans un tableau dynamique a l'aide d'un bouton [ par raven44 ]
Je possède deux formulaires, le premier dispose d'information recherché dans une base mysql, sur ce formulaire je dispose également d'un bouton de com
tableau dynamique avec jquery [ par mdh12 ]
salut, je veux savoir est ce que c'est possible de créer un tableau dynamique avec jquery en html si on fait appel à ce tableau [code=html][code=htm
Changement d'image dynamique dans un tableau [ par ilprim ]
salut a tous, voila je voudrais savoir si vous avait des tutos ou des codes sources qui pourrais me permettre de modifier des images dans un tableau
Tableau de calcul livret (excel >HTML) [ par filocheeric ]
Bonjour J'ai fais sous excel une table de calcul pour calculer les épaisseurs de livrets suivant le grammage des feuilles de couverture et intérieur
Du dynamique avec du javascript [ par minimoysmini ]
Salut, Voila je connais pas mal de truc en informatique. Je c'est programmer en C#,HTML,JavaScript et CSS. Puis j'ai eu envie de créer un jeux su
afficher un array dans un tableau html [ par xzonz ]
salut a toutes et tous [^^clinoeil1] voici ma question: j'ai un array() unidimensionnel qui peut contenir x éléments (selon les cas) de type et j'
array dans un tableau html avec jquery [ par xzonz ]
Bonjour à toutes et tous.[^^clinoeil1] Voila ma question : J'ai une page avec un div qui contient des liens vers des images. Via une fonction jQuery
Tri à bulles d'un tableau HTML [ par Airman31 ]
Tout d'abord bonjour à tous, J'ai besoin d'un petit coup de main pour une fonction Javascript que je suis en train d'implémenter : tri à bulle sur un
Dupliquer une ligne d'un tableau html javascript DOM [ par lord1366 ]
Bonjour, voici mon problème : Je voudrais copier une ligne d'un tableau html (celà fonctionne sous Mozilla, Opera, Safari, IE8 mais pas sous IE6 et I
Tableau dynamique (nbr ligne fonction d'un nbr d'enregistrement dans une table) [ par zxr_stinger ]
Bonjour à tous Je voudrais créer un tableau dans lequel le nombre de ligne de celui-ci soit fonction d'une variable préalablement établie. Possible en
 Livres en rapport
|
Derniers Blogs
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|