TABLEAU HTML DYNAMIQUE AVEC JAVASCRIPT DOM

Signaler
Messages postés
262
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
Messages postés
12
Date d'inscription
mercredi 8 décembre 2004
Statut
Membre
Dernière intervention
18 novembre 2011
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/46623-tableau-html-dynamique-avec-javascript-dom

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
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 ...
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
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')");
Afficher les 7 commentaires