Highlighting rows in tables with Javascript

Topic

New Reply

I want to display a table (3 rows, 2 columns) on a HTML page and when the user moves the mouse over a row it changes the background and text colours for the whole row to highlight it.

At present I can’t do that. What I have achieved is to create 3 separate tables (each 1 row, 2 columns) and in Internet Explorer I can change the background colour for the complete row when the mouse goes onto that row.
However it doesn’t change the text colour.
Worse for Netscape it does nothing at all.

Does anyone know if what I want to do is possible and if so how.

Reply | Quote

Replies

I haven’t tested it, but you should be able to do this with JavaScript. First you should create a function that changes the background color.

function rowHighlight(rowID,rowColor) {
document.table.rowID.bgColor=rowColor
}

The function would accept two parameters, the table row ID, and the new color. Next you would put the function in the

‘s onmouseover property, identifying the row, by ID, and the new color.

onmouseover=”rowHighlight([ID for current row],[the highlight color])

Last, the onmouseout property of the row should restore the default color.

onmouseout=”rowHighlight([ID for current row],[the default color])

This should work in both NS 4+ and IE 5+.

Reply | Quote

Hi artAlexion,

Thanks for your response however I am still having problems. Please could you look at the following HTML and tell me what I am missing.
Thanks
Andy

function rowHighlight(rowID,rowColor) {
document.table.rowID.bgColor=rowColor
}

hello	world	me
2	3	4
this	and	that

Reply | Quote

Like I said, I hadn’t tried it. Played with your code. First I corrected a couple of things. Your table and rows had to be given the ID’s so that the function could find them.
[indent]

---

function rowHighlight(rowID,rowColor) {
document.table1.rowID.bgColor=rowColor
}

hello	world	me
2	3	4
this	and	that

---

[/indent]
Unfortunately, I could not get it to work with JavaScript anyway. Tables and table rows appear not to be valid JavaScript objects.

Sorry. As I said, I hadn’t tried it.

Reply | Quote

Thanks anyway.

It appeared to be the case that the document didn’t have a table or a tablerow collection. I hoped someone else knew how to get at them in code. Odd, it seems others such as images, forms etc are part of collections.

Reply | Quote

It looks as though both you gentlemen could use some instruction in Javascript. The Javascript Source would be a good place to start.

Reply | Quote

Thanks for the tip, Eileen. Looks like a great site.

Reply | Quote