Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Changing row color??

0 views
Skip to first unread message

Ivan Debono

unread,
Jun 20, 2004, 5:37:46 AM6/20/04
to
Hi all,

I've got a table with some rows and 2 columns. I would like to change the
background color and the border color of the row the user clicks on.. .maybe
using css?

How can I do it??

Thanks,
Ivan


Stan Scott

unread,
Jun 25, 2004, 2:08:56 PM6/25/04
to
Ivan,

Border color applies only to individual cells, not the row itself.
Here's how to change the background color of a row when the user
clicks on it:

Set up the table like this:

<table onclick="vbscript:changeRow()" border="1">
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>
</table>

As you can see, the onclick call is placed inside the <TABLE> tag.
Somewhere on your HTML page, include this vbscript code:

<script language="vbscript">
function changeRow()
with window.event.srcElement.parentNode.style
if .backgroundColor = "white" or .backgroundColor = "" then
.backgroundColor = "blue"
else
.backgroundColor = "white"
end if
end with
end function
</script>

The element generating the click event is the cell
(window.event.srcElement), and the parentNode is the row -- this is
the style we want to change. When you start out, a row has no style
-- that's why the IF statement tests both conditions.

Stan Scott
New York City

Ivan Debono

unread,
Jun 27, 2004, 4:37:34 AM6/27/04
to
Works nearly good.

How would I need to unhighlight any previous row??

"Stan Scott" <stan...@yahoo.com> schrieb im Newsbeitrag
news:cc1fa2a4.04062...@posting.google.com...

Stan Scott

unread,
Jul 2, 2004, 12:28:08 AM7/2/04
to
Ivan,

Give the table its own ID, like this: <table id="mainTable">

Then, modify the routine below, like this:


<script language="vbscript">
function changeRow()

for each tRow in document.getElementById("mainTable").rows
tRow.style.backgroundColor = "white"
next

window.event.srcElement.parentNode.style.backgroundColor = "blue"
end function
</script>

If you wanted to clear all of the rows, I'd suggest setting up a link
elsewhere on the page, like this:
<a href="vbscript:clearAllTableRows()">Clear All</a>

<script language="vbscript">
function clearAllTableRows()
for each tRow in document.getElementById("mainTable").rows
tRow.style.backgroundColor = "white"
next
end function
</script>
"Ivan Debono" <ivan...@hotmail.com> wrote in message news:<OiZQ9HCX...@tk2msftngp13.phx.gbl>...

0 new messages