HTML and CSS Reference
In-Depth Information
EXAMPLE
15.11 (
CONTINUED
)
<script type="text/javascript">
2
window.onload = function(){
3
//
Create the table elements
var Table = document.createElement("table");
Table.setAttribute("id","myTable");
// Create id
var THead = document.createElement("thead");
var TBody = document.createElement("tbody");
var Row, Cell;
var i, j;
//
Declare two-dimensional array of table data
4
var header=new Array( "State","Capital","Abbr");
5
var state =[ ["Arizona","Phoenix","AZ"],
["California","Sacramento","CA"],
["Maine","Augusta","ME"],
["Montana","Helena","MT"],
["New York","Albany","NY"]
];
//
Insert the created elements into Table
6
Table.appendChild(THead);
Table.appendChild(TBody);
//
Insert a row into the header
7
Row = document.createElement("tr");
8
THead.appendChild(Row);
//
Create and insert table cells into the header row.
9
for (i=0; i<header.length; i++){
10
Cell = document.createElement("th");
11
Cell.innerHTML = header[i];
Row.appendChild(Cell);
}
//
Insert rows and cells into bodies.
12
for (i=0; i<state.length; i++){
13
Row = document.createElement("tr");
TBody.appendChild(Row);
14
for (j=0; j<state[i].length; j++){
15
Cell = document.createElement("td");
16
Cell.innerHTML = state[i][j];
Row.appendChild(Cell);
}
}
// Insert the table into the document tree
17
Tcontainer=document.getElementById("TableContainer");
Tcontainer.appendChild(Table);
}
</script>
