<?xml version="1.0" encoding="windows-1252"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>div table</title>
<script type="text/javascript">
var currentTable = null;
function createTable() {
//definizione dati tabella
//prima riga
var headers =["nome", "cognome", "nascita"];
//dati strutturati come Array
var data = [["Emma","Rossi","06/06/2006"],
["Carlo", "Rossi", "06/06/2006"],
["Elena", "Rossi", "06/06/2006"],
["Luca", "Rossi", "06/06/2006"]
];
var tabella = document.createElement("TABLE");
//proprietà
tabella.width = "400";
tabella.cellSpacing = "0";
tabella.cellPadding = "2";
//prima riga
var riga = tabella.insertRow(-1);
for(var i=0; i<headers.length; i++) {
var cella = riga.insertCell(-1);
cella.align = "center";
cella.background = "#EEEEEE";
cella.style.font = "bold 12px arial";
cella.style.borderBottom = "1px solid #666666";
cella.innerHTML = headers[i];
}
//righe dati
for(var i=0; i<data.length; i++) {
var rigaDati = data[i]; //array riga dati
var riga = tabella.insertRow(-1);
for(var n=0; n<rigaDati.lenght; n++) {
var cella = riga.insertCell(-1);
cella.style.font = "12px verdana";
cella.style.borderBottom = "1px solid #999999";
cella.innerHTML = rigaDati[n];
}
}
currentTable = tabella;
var container = document.getElementById("container");
container.appendChild(currentTable);
}
function cliccami() {
//instanzia i riferimenti
var container = document.getElementById("container");
var btn = document.getElementById("btn");
//controllo tabella ed eventualmente la crea
if(currentTable==null)
createTable();
//imposta visibilità del DIV
if(container.style.display=="none") {
container.style.display="inline";
btn.value = "Cliccami qui per nascondere la tabella!";
}
else {
container.style.display="none";
btn.value = "Cliccami qui per vedere la tabella!";
}
}
</script>
</head>
<body>
<div>
<button id="btn" onclick="cliccami()">Cliccami qui per vedere la tabella!</button>
<div id="container" style="display:none"></div></div>
</body>
</html>
