Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old October 18th, 2004, 07:08 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default onClick change bgcolor of entire row

Hi,
Could anybody tell me how to change the bgcolor of
an entire row(say having 5 columns) on the click event of a mouse
and without reloading the page...

also if another row is clicked on ,the bgcolor of the currently
selected row should change while that of the previously
selected row should return to the default bgcolor..



Thanks.
Pallav.
  #2 (permalink)  
Old October 18th, 2004, 08:43 PM
Friend of Wrox
 
Join Date: Nov 2003
Location: , , .
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Try this.

<script type='text/javascript'>
var trs = document.getElementsByTagName('tr');
for(var i=0; i< trs.length; i++)
{
    trs[i].onclick = "color(this)";
}
function color(obj)
{
    for(var i=0; i < trs.length; i++)
    {
        var cells = trs[i].getElementsByTagName('td');
        for(var p=0; p < cells.length; p++)
        {
            cells[i].style.backgroundColor = 'white';
        }
    }
    currentCells = obj.getElementsByTagName('td');
    for(var n=0;n<currentCells.length;n++)
    {
        currentCells[n].style.backgroundColor = 'green';
    }
}
</script>

Just include that script and let me know if it works how you like.

-Snib <><
Try new FreshView 0.2!
There are only two stupid questions: the one you don't ask, and the one you ask more than once ;)
  #3 (permalink)  
Old October 21st, 2004, 12:35 AM
Authorized User
 
Join Date: Sep 2004
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Snib,
Tat was a gr8 piece of code.
Works perfectly in both IE6 and Mozilla v1.7.1.

Had to make a few changes though.

in the <tr> tag of my table i had to include the onclick="color(this);" handler..

n a bit of modification to ur code too..
i have commented the parts where i had to make the changes.

<script type='text/javascript'>
var trs = document.getElementsByTagName('tr');
for(var i=0; i< trs.length; i++)
{
    trs[i].onclick = "color(this)";
     color(this);//This line had to be added for
                    giving the table the default color
                    when the page loads
}
function color(obj)
{
    for(var i=0; i < trs.length; i++)
    {
        var cells = trs[i].getElementsByTagName('td');
        for(var p=0; p < cells.length; p++)
        {
            //cells[i].style.backgroundColor ='white';
              cells[p].style.backgroundColor='white';
            //cells[i] changed to cells[p]
        }
    }
    currentCells = obj.getElementsByTagName('td');
    for(var n=0;n<currentCells.length;n++)
    {
        currentCells[n].style.backgroundColor = 'green';
    }
}
</script>

By the way the script has to be included after the table display code.

Was trying to include a "ondblclick="function()" in the <tr> tag of my table but only the onclick="color(this)" was being executed...
Could u give me a solution 4 tat..

Also could could i add the "onmouseover" event handler??

Thanks.
Pallav


Similar Threads
Thread Thread Starter Forum Replies Last Post
Ajax change textbox bgcolor after Criteria met mkthompson Ajax 1 July 28th, 2008 08:56 AM
copy entire row stealthdevil Access VBA 3 December 1st, 2006 11:39 AM
Change onclick of a button me_zeta HTML Code Clinic 1 November 20th, 2006 10:34 AM
change bgColor crmpicco Javascript 1 July 9th, 2005 07:29 PM
using onClick to change images kyle.burnam Javascript How-To 2 March 10th, 2005 11:09 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.