dcsimg

How can I dynamically change the background color of a selected/highlighted table or cell by clicking on a button using JavaScript?

Created May 7, 2012

Luigi Viggiano

The following will work in Internet Explorer: 


<HTML>
<HEAD>
<SCRIPT LANGUAGE='JavaScript'><!--
  function setTableBG(color){    
    table1.style.backgroundColor=color
  }

  function setColumnBG(color){    
    column1.style.backgroundColor=color
  }

  function resetBG(){
    setTableBG('white');
    setColumnBG('white');   
  }

-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="TABLE BG"
    onClick="setTableBG('red')">
<INPUT TYPE="button" VALUE="COLUMN BG"
    onClick="setColumnBG('green')">
<INPUT TYPE="button" VALUE="Reset"
    onClick="resetBG()">
</FORM>

<TABLE ID="table1" >
    <TR>
        <TD ID="column1">
            Column1
        </TD>
        <TD ID="column2">
            Column2
        </TD>
    </TR>
</TABLE>
</BODY>
</HTML>