table cursor for highlight and select without JS

[the_nerd]

Hi,

I'd like to bring some live to a table that shows several records - without JS.

In IE I was able to put a couple of table fields inside <a>-tags:

<a ......><td>Field1</td><td>field2</td>...<td>fieldn</td> </a>

<proud>
IE handles all table fields as clickable links.
And - a:hover {cursor:pointer} - even shows a little hand when the mouse moves over the table fields.
</proud>

but - I wasnt't able to get a different background color when "hovering" - and even worse: FireFox doesn't care about my nice idea. Doesn't seem to regard the cells as clickable links.

Does anybody know how I can get
1. clickable table cells (just one <a> for the whole row!)
2. with hand-pointer
3. with changing backgrounf-color
4. on IE and firefox?

I somebody out there knows it can't be done, that would help as well - then I know I have to do it with JS.

Thanks, nerd.

[Robin_reala]

The <a> wrapper isn't legit HTML (<tr>s can only contain <td>s or <th>s) which is why Firefox isn't supporting it. Most browsers can apply :hover to anything so you could try just adding a tr:hover to your existing CSS. If you want to do it properly though and get it working in IE as well then you'll need to write some Javascript. This isn't difficult however. Here's a sample (given a table with id="sampletable"):

sampletable = document.getElementById('sampletable');
rows = sampletable.getElementsByTagName('tr');
for (i=0; i<rows.length; i++; ) {
 rows[i].onmouseover = 'this.className="over";';
 rows[i].onmouseout = 'this.className="";';
}

Then in your CSS change you a:hovers for your table rows to:

tr:hover, tr.over { background-color: whatever; cursor: pointer; }

(n.b. all that code is untested, but should work fine...)

[the_nerd]

thanks a lot!

The reason I wanted to avoid JS was that I didn't want to shove over hundreds of JS-commands (I had about 50k in JS stuff) . Now this little loop is exactly what I need!

nerd.