Solved

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

Posted on 2006-11-08
5
768 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

632 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