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
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
How would I need to unhighlight any previous row??
"Stan Scott" <stan...@yahoo.com> schrieb im Newsbeitrag
news:cc1fa2a4.04062...@posting.google.com...
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>...