Create table dynamically - object

Question

I think my question is simple for js experts (I am a beginner in js).
In my script I dynamically create a table. In html code I have a button and I want all table cells to be filled with some color when you click on this button.
I have a separate function for filling the table cells but the problem I have encountred is that when I click the button only the last cell of the table gets filled. I assume this issue has something to do with closures as the table cells are being created inside the loop.
Here is the code:
HTML:
<button onclick='show()'>Click</button>
JS:
var obj = new Object;
obj.x = document.createElement('table');
document.body.appendChild(obj.x);
for(i=0;i<10;i++){
obj.y = document.createElement('tr');
obj.x.appendChild(obj.y);
for(j=0;j<10;j++){
obj.z = document.createElement('td');
obj.z.appendChild(document.createTextNode(j));
obj.y.appendChild(obj.z);
}
}
function fill(){
obj.z.style.backgroundColor='red';
}
//-->

Answer 1

Each time the for loop iterates, obj.z is overwritten by a new one, meaning only the last cell will ever be referenced. An easier way to style all the cells in a table is very simply just to change the backgroundColor of the <table> itself.
If you want to do this another way, you'd need to loop through the cell elements individually, and style each one as you go. An easier way to do this is to use jQuery, add a className property to the value (such as theTable in this example) and use the following code:
$('table.theTable td').css('backgroundColor','red');
This would select all the <td> elements in a table with class theTable (it uses CSS selectors), and style their backgroundColor CSS property as red.