Question

I trying to change the background color of a table through Java script onClientClick. But the background doesn’t change.

Script:

<script type="text/javascript">
function compTableBGChange() {
    document.getElementById("tableComptag").style.backgroundColor = "Black";
}
</script>

My Table:

<table id="tableCompTag">
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Computer Tag"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtBxCompTag" runat="server" Width="166px" ReadOnly="True">           
</asp:TextBox>
</td>
<td>
<asp:Button ID="btnCompTagUpdate" runat="server" Text="Edit" 
onclick="btnCompTagUpdate_Click" OnClientClick="compTableBGChange()"/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible="False" 
onclick="btnCancel_Click" />
</td>
<td></td>
</tr>
</table>

What’s wrong in this and how can I fix it?

Answer 1

You are not preventing the button from posting back to server. So you should return false from OnClientClick or use an HTMLInputButton instead. If you want to postback, you should make the table runat=server and change the style on serverside via HtmlTable.BgColor.

OnClientClick="compTableBGChange();return false;"

Apart from that, document.getElementById performs a case-sensitive match on the ID attribute(at least in IE8 and in FF).

So replace

document.getElementById("tableComptag")

with

document.getElementById("tableCompTag")