• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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