How to generate a table of colors?

Question

I'm trying to create a table with 32 buttons. Each button generated must have the name of a color (in turn generated for the button). If I click on the button, placed in the table, the page background color should be with the text (color) displayed on the pressed button.

I thought about this:

var tableRef = document.getElementById('table').getElementsByTagName('tbody')[0];

var newRow   = tableRef.insertRow(tableRef.rows.length);
newRow.id = "row"

Can you do this? What advice could you give me the components to be used? I making this in Javascript code.

Answer 1

Advice:

Create the entire thing using Javascript.

 function createTable(){
     var body=document.getElementsByTagName('body')[0];
     var tbl=document.createElement('table');
     tbl.setAttribute('id', tableID);

     var tbdy=document.createElement('tbody');

     for(var i=0;i<4;i++){
         var tr=document.createElement('tr');
         for(var j=0;j<8;j++){
             var td=document.createElement('td');

             var bt = document.createElement('button'); 
             // add button attributes
             td.appendChild(bt);
             tr.appendChild(td)
        }
    }
    tbdy.appendChild(tr);
   }
   tbl.appendChild(tbdy);
   body.appendChild(tbl)
}

then you create the onclick method

  function changeColor(color){
      var body=document.getElementsByTagName('body')[0];
      body.style.bgColor = color;
  }

Mind you I'm doing this from memory, if the bgcolor doesn't work then try something else