Creation dynamique d'un tableau en HTML

Signaler
Messages postés
16
Date d'inscription
jeudi 15 septembre 2005
Statut
Membre
Dernière intervention
23 octobre 2008
-
Messages postés
16
Date d'inscription
jeudi 15 septembre 2005
Statut
Membre
Dernière intervention
23 octobre 2008
-
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

9 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
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.






<hr />



<hr />
<sub>
STFOU
</sub>
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
OOOups, il fallait lire tableau.insertRow(i);

<hr /><hr />STFOU
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
16
Date d'inscription
jeudi 15 septembre 2005
Statut
Membre
Dernière intervention
23 octobre 2008

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?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
16
Date d'inscription
jeudi 15 septembre 2005
Statut
Membre
Dernière intervention
23 octobre 2008

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
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
16
Date d'inscription
jeudi 15 septembre 2005
Statut
Membre
Dernière intervention
23 octobre 2008

Merci je la teste demain