HTML table change cell color

Question

I have an HTML table to which i add rows when button is clicked. That part work fine:

function ic_add_supplier_line(){
   var table = document.getElementById("ic_current_pricing");
   var count = $('#ic_current_pricing tr').length;
   var row = table.insertRow(count); 
  for (i = 0; i < 8; i++) {
     var cell = row.insertCell(i); 
     var cell_id = "ic_q_" + String(i) +"_" + String(count)
     cell.innerHTML = "<input id=" + cell_id + " style='width:100%;' type='text' ondblclick='select_supplier(this.id)' >" 
  } 
}

When cell is double clicked I want the cell background color to change.

  function select_supplier(elm_id) {
     var cur_row = elm_id.slice(-1)
     var table = document.getElementById("ic_current_pricing");
     var rows = table.getElementsByTagName("tr") ;
     for (var i=0; i<rows.length; i++) {
        if (i== cur_row){
           for (j =0; j<8; j++){
               rows[i].cells[j].className="on"
           }    
        }else{
           for (j =0; j<8; j++){
           rows[i].cells[j].className=""        
        }
     }
   }
}

and CSS

.on{
   background-color:green ;
 }

Only border/outline is changing color. Cell remains white. Appreciate any help. Thanks in advance.

Answer 1

The problem was that the input field generated overlapped the actual cell, so when the color change was occurring it wouldn't display the entire cell since the input field was taking 99% of it. By altering and assigning the "on" class to effect the input fields, we got the final result that OP desired.