1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Divers
  5. Tableau html dynamique avec javascript dom

Tableau html dynamique avec javascript dom

Soyez le premier à donner votre avis sur cette source.

Vue 25 725 fois - Téléchargée 1 779 fois

Télécharger le projet
Commenter

Description

construire un tableau html interface graphique avec javascript dom :
c'est un petit objet javascript à développer, à améliorer, c'est une base, actuellement sans commentaire, mais c'est déjà ça.

Source / Exemple : 


function tab(col,lign)
{
  this.tab = document.createElement("table");
  this.autoid=1;

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

   this.newRow = this.tab.insertRow(-1);

   for(i=0;i<col;i++)
   {
    
     this.newCell = this.newRow.insertCell(i);
     this.newCell.innerHTML = /* "&nbsp;"; */ this.autoid;
     this.newCell.setAttribute("id",this.autoid);

     with(this.newCell.style)
     {
       borderStyle = 'solid';
       borderWidth = '2px';
       borderColor = "#000000";
       width = '100px';
       height = '50px';
       textAlign = 'center';
     }

   this.autoid++;
  }

}

  this.addtxt = function(id)
  {
    document.getElementById(id).innerHTML = "ne";
  }

  document.body.appendChild(this.tab);

     

}
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
12
Date d'inscription
mercredi 8 décembre 2004
Statut
Membre
Dernière intervention
18 novembre 2011
 1

























function tab(col,lign)
{
this.tab = document.createElement("table");
this.autoid=1;
this.lign = 0;
this.largeur = 0;
this.newCell = null;





for(j=0;j
Signaler
Messages postés
3
Date d'inscription
mercredi 24 mai 2006
Statut
Membre
Dernière intervention
27 février 2010
<html>

<head>

<style>



div#lecture {
border-style : solid;
border-width : 2px;
border-color : #000000;
width : 100px;
height :auto;
text-align : center;
}

</style>

</head>














<script language='javascript'>

function tab(col,lign,mep)
{
this.tab = document.createElement("table");
this.tab.setAttribute("align",mep);
this.autoid=1;
this.lign = lign;

for(j=0;j<lign;j++)
{
this.newRow = this.tab.insertRow(-1);
for(i=0;i<col;i++)
{

this.newCell = this.newRow.insertCell(i);
this.newCell.innerHTML = this.autoid;
this.newCell.setAttribute("id",this.autoid);


/* ############################# fonction de la cellule ################################### */

this.newCell.onclick = function () { window.alert(this.id); }
this.newCell.onmouseover function () { this.style.backgroundColor "#FFF000"; document.getElementById("lecture").innerHTML = " "+ parseFloat(this.innerHTML*6.55957).toFixed(2)+" Francs "; }
this.newCell.onmouseout function () { this.style.backgroundColor "#FFF"; }




/* ############################# style de l'objet ################################### */

with(this.newCell.style)
{
borderStyle = 'solid';
borderWidth = '2px';
borderColor = "#000000";
width = '100px';
height = '50px';
textAlign = 'center';
}
this.autoid++;
}
}

/* ############################# fonction de l'objet ################################### */

this.addtxt = function(id)
{
document.getElementById(id).innerHTML = "ne";
}



document.body.appendChild(this.tab);

}

var tab = new tab(10,10,"center");

</script>

</html>

produit customisé et dérivé pour ma grand-mère ...
Signaler
Messages postés
3
Date d'inscription
mercredi 24 mai 2006
Statut
Membre
Dernière intervention
27 février 2010
<html>

<head>



</head>






<script language='javascript'>

function tab(col,lign,mep)
{
this.tab = document.createElement("table");
this.tab.setAttribute("align",mep);
this.autoid=1;

for(j=0;j<lign;j++)
{
this.newRow = this.tab.insertRow(-1);
for(i=0;i<col;i++)
{

this.newCell = this.newRow.insertCell(i);
this.newCell.innerHTML = /* " "; */ this.autoid;
this.newCell.setAttribute("id",this.autoid);
this.newCell.onclick = function () { window.alert(this.id); }

with(this.newCell.style)
{
borderStyle = 'solid';
borderWidth = '2px';
borderColor = "#000000";
width = '100px';
height = '50px';
textAlign = 'center';
}
this.autoid++;
}
}

this.addtxt = function(id)
{
document.getElementById(id).innerHTML = "ne";
}



document.body.appendChild(this.tab);

}

var tab = new tab(10,10,"center");

</script>

</html>


fonctionne sous firefox et sur IE
Signaler
Messages postés
940
Date d'inscription
jeudi 20 février 2003
Statut
Membre
Dernière intervention
3 février 2011
 9
J'ai trouvé, il faut faire
this.newCell.onclick = new Function("alert('test')");
Signaler
Messages postés
940
Date d'inscription
jeudi 20 février 2003
Statut
Membre
Dernière intervention
3 février 2011
 9
Parce que
this.newCell.onclick = "alert('test')";
s'affiche bien, mais il n'y a pas d'alert
j'ai essayé avec onClick, même résultat...
Afficher les 7 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.