Tableau html dynamique avec javascript dom

Soyez le premier à donner votre avis sur cette source.

Vue 23 088 fois - Téléchargée 1 551 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
alcoveforlove
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
LogansRun
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
LogansRun
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
tbbuim1
Messages postés
940
Date d'inscription
jeudi 20 février 2003
Statut
Membre
Dernière intervention
3 février 2011
 7 -
J'ai trouvé, il faut faire
this.newCell.onclick = new Function("alert('test')");
Signaler
tbbuim1
Messages postés
940
Date d'inscription
jeudi 20 février 2003
Statut
Membre
Dernière intervention
3 février 2011
 7 -
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.