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.

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 ;)

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