<body>
<style>
td {border: solid 1px; width: 20px; height: 20px; text-align: center; background: lightgrey}
</style>
<script>
window.onload = function () {
var data = new Array('a', 'b', 'c', 'd', 'e');
var length = data.length;
var row = '<tr><td></td></tr>';
var str = '';
for (var i = 0; i < length; i++) {
str += row;
}
var myTable = document.createElement('table');
document.body.appendChild (myTable);
myTable.innerHTML = str;
myTable.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
for (var i = 0; i < length; i++) {
if (target.parentNode == myTable.rows[i]) {
target.innerHTML = data[i];
return;
}
}
}
}
</script>