onClick which changes the color of the table row [Archive]

Click to See Complete Forum and Search --> : onClick which changes the color of the table row

Alv

04-23-2004, 01:39 AM

I do not know what this effect is called but I am trying to learn how to create the effect where you check a checkbox and the table row is highlighted.

This effect is available in the Hotmail inbox.

Thanks in advance.

JayDie

04-23-2004, 02:03 AM

Something like this...
<html>
<head>
<script>
function highlight(obj)
{if(!document.getElementById('row1').checked)
{obj.style.backgroundColor = 'red'
document.getElementById('row1').checked = true
}
else
{obj.style.backgroundColor = ''
document.getElementById('row1').checked = false
}
}

</script>
</head>

<body>
<table border=1 style="width: 300px">
<tr onclick="highlight(this)"><td><input id="row1" type="checkbox"></td><td>test2</td></tr>
</table>

</body>
</html>
You've got to make it dynamic, then it's finished :D

JayDie

04-23-2004, 02:05 AM

also add the onclick event to the checkbox...

You mean something like this, don't you?

Alv

04-23-2004, 03:58 AM

JayDie, yes, something like that but the trigger is the checkbox instead of the table cell. Thanks for the help, I will use your example to see if I can make the checkbox to be the trigger.

Thank you.

JayDie

04-23-2004, 04:28 AM

This one is better:
<html>
<head>
<script>
function highlight(obj)
{var tag
tag = obj.parentElement

while (tag.tagName.toLowerCase()!='tr' && tag.tagName.toLowerCase()!='body')
{tag = tag.parentElement
}

if(tag.tagName.toLowerCase() == 'tr')
{if(obj.checked)
tag.style.backgroundColor = 'red'
else
tag.style.backgroundColor = ''
}
}

</script>
</head>

<body>
<table border=1 style="width: 300px">
<tr><td><input type="checkbox" onclick="highlight(this)"></td><td>test2</td></tr>
</table>

</body>
</html>

Good luck!

Alv

04-27-2004, 01:20 AM

JayDie, thanks a lot for helping me out.

Cheers.