Solved

Making an entire row on a table into a link, setting font color on A style

Posted on 2006-11-08
5
762 Views
Last Modified: 2013-12-03
I have a table row that I generate with PHP that shows up as follows:
<tr ><th scope="row"><a href="showlisting.php?messageid=1">11/5/06</a></th><th><a href="showlisting.php?messageid=1">Motorola V3</a></th><th><a href="showlisting.php?messageid=1">100</a></th><th><a href="showlisting.php?messageid=1">New</a></th><th><a href="showlisting.php?messageid=1">Test Corp</a></th><th class="msg"><a href="showlisting.php?messageid=1">Motorola is one of several companies which has high sales in the clamshell seg..</th></tr></a>                        <tr ><th scope="row">11/3/2006</th><th>Nokia 9000</th><th>1000</th><th>New</th><th>Test Corp.</th><th class="msg">New in box, OEM chargers, OEM battery, Comes with 30 day Warranty fro..</th>

as you can see, I repeat the link for each value. I tried encompassing the whole row in a <a href> tag but it doesn't seem to work. Is there a way to make the whole row clickable? I would really like the whole row including the spaces between each column to be clickable as well, because I highlight the entire row when the mouse scrolls over it. Another problem I have is I set the A attributes as follows:
 <style type="text/css">
A     {
      text-decoration:none;
      }
</style>

so that the links are not underlined. The problem is it turns each values into the column a gray color. I tried setting the font color within that tag back to black but it doesn't seem to work. Any ideas? Thanks!
0
Comment
Question by:stormist
  • 4
5 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17902477
to get a table row clickable some javascript will do the trick.

try <tr onclick="window.location.href='showlisting.php?messageid=1'"> .... </tr>
0
 
LVL 30

Accepted Solution

by:
VirusMinus earned 500 total points
ID: 17902499
also add this to make it obvious its clickable via the hand cursor
<tr style="cursor:pointer;" onclick="window.location.href='showlisting.php?messageid=1'"> .... </tr>
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17902527
you cannot have block level elements inside inline elements, tr's and td's are block, a is inline.

for highlighting you could do this:

<tr title="Clickable table row" onClick="window.location.href = ''showlisting.php?messageid=1''" onMouseOver="this.style.cursor='hand'; this.bgColor = 'gray'; " onMouseOut ="this.bgColor = 'white'">
<td>asdasdasdasd</td></tr>

for the hyperlink colours, try setting for the different states, like this:

a:link, a: visited{color: black; text-decoration: none;}
a:hover, a:active{color: blue; text-decoration: underline;}
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17902646
sorry, no space between a: and visited
0
 
LVL 10

Author Comment

by:stormist
ID: 17903913
That solution was perfect thanks! I do appreciate your time and effort.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
is this a cms? 8 67
Objects on Same Line 2 38
Could I have some help for an easy CSS change to this latest news scroller 10 24
100% tall div not scrollable on iPhone 3 20
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question