Creation dynamique d'un tableau en HTML

Question

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

PetoleTeam · Answer

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... ...la suite du body... Pas sur que cela réponde à ton besoin. ;0)

stfou · Answer

Bonjour, PetoleTeam >> Pas très élegant tout ça... var tableau=document.createElement("table"); for(i=0;i

_STFOU

stfou · Answer

OOOups, il fallait lire tableau.insertRow(i);

STFOU

PetoleTeam · Answer

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)

AllalcoolG · Answer

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?

PetoleTeam · Answer

B onjour... Plusieures solutions possibles mais en voici une qui utilise les styles... 1/ dans le ajout du style, c'est un exemple 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)

AllalcoolG · Answer

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

PetoleTeam · Answer

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)

AllalcoolG · Answer

Merci je la teste demain

Creation dynamique d'un tableau en HTML

9 réponses

Votre réponse

Discussions similaires