• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 309
  • Last Modified:

table cell bgcolor

Hi all,

I am using ASP.NET/C# and a little javascript.

I have a table on my aps.net page.  Each cell (td) has a asp link button contol in it and the table cells have an id and it is set to runat = server.

I want to be to click on a link button and change the background color of the cell that the link button is associated with to  blue and to change the rest of the cells to a white background.

I am currently using this code.

 private void tblLinksColorChange(string sColor)
        {
            tableLinks.BgColor = sColor;

            lbtnAll.ForeColor = System.Drawing.Color.Blue;
            lbtnPendingApproval.ForeColor = System.Drawing.Color.Blue;
            lbtnPendingINE.ForeColor = System.Drawing.Color.BlueViolet;
            lbtnClosed.ForeColor = System.Drawing.Color.Blue;
            lbtnRejected.ForeColor = System.Drawing.Color.Blue;
        }

        protected void lbtnAll_Click(object sender, EventArgs e)
        {
            tblLinksColorChange("White");

            tdAll.BgColor = "Black";
            lbtnAll.ForeColor = System.Drawing.Color.White;
        }



This works but my question is how can i do this more effieciently.  I want to use JAVASCRIPT to do this. Can it be done? If so how?

Thanks
0
joan2006
Asked:
joan2006
  • 4
  • 4
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
The rest of the cells on the row, or all the cells in the table?
0
 
Ashish PatelCommented:
Yes that is possible, by doing this document.getElementByID("cell id").style.backgroundcolor.value="red";
0
 
Ashish PatelCommented:
document.getElementByID("cell id").style.background="red";
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Ashish PatelCommented:
keep that part on some event click button click or anything.
0
 
joan2006Author Commented:
tblLinks is the table that  contain the link buttons. so when i click on lbtnAll(link button) it changes the entire table (tblLinks) bgcolor to white.  then it changes the cells bgcolor that contains the link i clicked on   black and the forecolor of the linkbutton to white.

This give me the effect i want, but i want to do this in javascript.
0
 
Ashish PatelCommented:
yes you can do that but then we will require a dynamic function in javascript where it loops through all the cell id's of the table marking their back color as white and changing the cell to black for the one which had the button. But mind well we wont be able to change the forecolor of the link button to white if thats a COMPONENT and not html button.
0
 
Michel PlungjanIT ExpertCommented:
<style>
.on { color:white; background-color:black}
.off { color:black; background-color:white}
</style>
<script>
function changeColor(cell) {
  var table = document.getElementById('t1');
  for (var r=0;r<table.rows.length;r++) {
    for (var c=0;c<table.rows[r].cells.length;c++) {
      table.rows[r].cells[c].className='off'
    }
  }
  cell.className='on'
}
</script>
<table id="t1" cellspacing="10" cellpadding="10">
<tr>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 1"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 2"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 3"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 4"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 5"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 6"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 7"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 8"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 9"></td>
</tr>
<tr>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 1"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 2"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 3"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 4"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 5"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 6"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 7"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 8"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 9"></td>
</tr>
<tr>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 1"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 2"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 3"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 4"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 5"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 6"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 7"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 8"></td>
<td><input type="button" onClick="changeColor(this.parentNode)" value="click me 9"></td>
</tr>
</table>
0
 
joan2006Author Commented:
Thanks mplungjan
0
 
Michel PlungjanIT ExpertCommented:
Actually this is better (can handle multiple tables)
  var table = cell.parentNode.parentNode;
0
 
Michel PlungjanIT ExpertCommented:
PS: @asvforce
document.getElementByID("cell id").style.backgroundcolor.value="red";
Should be
document.getElementByID("cell id").style.backgroundColor="red";
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now