TABLEAU HTML DYNAMIQUE AVEC JAVASCRIPT DOM

cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014 - 10 mai 2008 à 14:26
alcoveforlove Messages postés 12 Date d'inscription mercredi 8 décembre 2004 Statut Membre Dernière intervention 18 novembre 2011 - 27 juin 2009 à 23:04

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

alcoveforlove Messages postés 12 Date d'inscription mercredi 8 décembre 2004 Statut Membre Dernière intervention 18 novembre 2011 1
27 juin 2009 à 23:04

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

LogansRun Messages postés 3 Date d'inscription mercredi 24 mai 2006 Statut Membre Dernière intervention 27 février 2010
26 juin 2009 à 03:12

<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 ...

LogansRun Messages postés 3 Date d'inscription mercredi 24 mai 2006 Statut Membre Dernière intervention 27 février 2010
26 juin 2009 à 00:59

<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

tbbuim1 Messages postés 940 Date d'inscription jeudi 20 février 2003 Statut Membre Dernière intervention 3 février 2011 9
25 juin 2009 à 10:34

J'ai trouvé, il faut faire
this.newCell.onclick = new Function("alert('test')");

tbbuim1 Messages postés 940 Date d'inscription jeudi 20 février 2003 Statut Membre Dernière intervention 3 février 2011 9
25 juin 2009 à 10:27

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...

tbbuim1 Messages postés 940 Date d'inscription jeudi 20 février 2003 Statut Membre Dernière intervention 3 février 2011 9
25 juin 2009 à 10:22

Comment faire un onclick sur vos Td dynamic?

cs_Kimjoa Messages postés 262 Date d'inscription vendredi 6 mai 2005 Statut Membre Dernière intervention 19 septembre 2014
10 mai 2008 à 14:26

salut je viens de télécharger tas source , et elle ne fonctionne pas sous ff, sans doute a cause des fonctions insertRow et insertCell que je connais pas. Si tu veux utiliser un code utilisable par tout les navigateur utilise cette structure .

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr= document.createElement("tr");
var td= document.createElement("td");

maSible.appendChild(table);
table.appendChild(tbody);
tbody.appendChild(tr);
tr.appendChild(td);

le tbody est obligatoire lorsqu on construit une tablepar le DOM ,bonne continuation

Discussions similaires

Allocation dynamique, tableau à 2 dimensions

qu'est ce que le span en html?

Partie entiére d'un nombre

Turbo C++

tableau de nombre décimal vers tableau de nomber binaire

Votre réponse

Discussions similaires