|
CS479/579 - Web Programming II
|
Displaying ./code/ES/table2.html
<!-- A comment -->
<!DOCTYPE html>
<html>
<head>
<title> Table by object creation </title>
<meta charset='utf-8'>
<!--
<link rel='stylesheet' src='styles.css' type='text/css' />
-->
<style>
</style>
<script>
var rows = 20, cols = 20;
// Create a table cell with it's contents set to it's row x column position:
function td(r, c) {
var td = document.createElement("td");
td.innerHTML = r + ',' + c;
return td;
}
// Creates a row element, appends table cells to it and then returns it:
function row(r) {
var row = document.createElement("tr");
for(var c = 0; c < cols; c++)
row.appendChild(td(r,c));
return row;
}
// Creates a table body, appends rows to it, then returns it:
function tbody() {
var tbody = document.createElement("tbody");
for(var r = 0; r < rows; r++)
tbody.appendChild(row(r));
return tbody;
}
/**
* Create a table element and append to it the table body returned from tbody()
* above, then append it to the document.body after emptying the document body
* by setting it's innerHTML to the null string.
*/
function maketable() {
var table = document.createElement("table");
table.border = "1";
table.appendChild(tbody());
document.body.innerHTML = "";
document.body.appendChild(table);
}
</script>
</head>
<body>
<!-- Clicking the button will dynamically add a table to the document.body -->
<button onclick='maketable();'> Make a table </button>
</body>
</html>
|