Hi,
Below is the code I have made for you.
HTML code.
<div>
<table width="10%" border="1" cellspacing="0">
<tr>
<td id="cell1">1</td>
<td id="cell2">2</td>
</tr>
<tr>
<td id="cell3">3</td>
<td id="cell4">4</td>
</tr>
</table>
<br />
<br />
<input type="button" value="Change Colour" id="btn" onclick="return ChangeColour();" />
</div>
Javascript Code
<script type="text/javascript">
function ChangeColour() {
var arr = [["000000", "000033"],["000066", "000099"],["0000CC", "0000FF"],["003300", "003333"],["003366", "003399"],
["0033CC", "0033FF"],["006600", "006633"],["006666", "006699"],["0066CC", "0066FF"],["009900", "009933"],["009966", "009999"],
["0099CC", "0099FF"],["00CC00", "00CC33"],["00CC66", "00CC99"],["00CCCC", "00CCFF"],["00FF00", "00FF33"],["00FF66", "00FF99"],
["00FFCC", "00FFFF"],["330000", "330033"],["330066", "330099"],["3300CC", "3300FF"],["333300", "333333"],["333366", "333399"],
["3333CC", "3333FF"],["336600", "336633"],["336666", "336699"],["3366CC", "3366FF"],["339900", "339933"],["339966", "339999"],
["3399CC", "3399FF"],["33CC00", "33CC33"],["33CC66", "33CC99"],["33CCCC", "33CCFF"]];
arr_length = arr.length;
first_row = Math.floor(Math.random() * arr_length) - 1;
second_row = Math.floor(Math.random() * arr_length) - 1;
document.getElementById("cell1").style.backgroundColor = "#"+arr[first_row][0];
document.getElementById("cell2").style.backgroundColor = "#" + arr[first_row][1];
document.getElementById("cell3").style.backgroundColor = "#" + arr[second_row][0];
document.getElementById("cell4").style.backgroundColor = "#" + arr[second_row][1];
return true;
}
</script>
You can rearrange your color code array to get more colorful background color.