CODEWITHSUNDEEP
javascripthtmlcss
user784637
user784637

Reputation: 16142

How to make entire td a link?

How do I make this entire td a link?

<td id="blue-border"><span id="blue"></span></td>

Clicking td should make it behave like this (I know this is syntactically incorrect:

<a href="javascript:chooseStyle('blue-theme', 360)"> <td id="blue-border"><span id="blue"></span></td> </a>

EDIT: so far all the suggestions are only making the span inside the td a link, help lol.

Upvotes: 12

Views: 28301

Answers (7)

Will Martin
Will Martin

Reputation: 4180

Use CSS.

td a { display: block; width: 100%; height: 100%; }
<table style="width: 100%">
  <tr>
    <td><a href="#">Link</a></td>
  </tr>
</table>

The CSS forces the link to expand to the full width and height of the TD.

Upvotes: 28

sumac2003
sumac2003

Reputation: 1

Use jquery with class
$("tr td.data_col").click(function() { window.location = $(this).find('a').attr("href"); });

Upvotes: 0

Marco Hurtado
Marco Hurtado

Reputation: 534

<table width="100%" class="blueCss">
    <tr>
        <td ID="tdBlue">
            <span id="Blue">Hello</span>
        </td>  
        <td>
            <span>other col</span>
        </td>
     </tr>
</table>

css file:

.blueCss {
        height: 100px;
        width: 100px;
    }

    .blueCss td {
        background-color: blue;
    }

    .blueCss:hover    {
        border-color: #00ae00;
    }

    .blueCss td:hover    {
        background-color: yellow;
        cursor: pointer;
    }

jQuery code:


$(document).ready(function(){
    var tdLink = $('#tdBlue');

    tdLink.click(function(){
         alert('blue-theme');
    });
});

Check here: jsFiddle.net

Upvotes: 2

Joe Enos
Joe Enos

Reputation: 40393

If all you're doing is firing javascript, I'd suggest using onclick instead of an anchor tag in the first place, like:

<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>

You can throw a simple css style on there if you want the mouse to become a pointer:

#cell123:hover { cursor: pointer; }

Upvotes: 2

rolling stone
rolling stone

Reputation: 13016

Add an anchor tag inside of the td and set its display attribute to block. This should make the entire td clickable.

#blue-border a{
    display: block;
}

or

<a href="link" style="display:block;">

Upvotes: 3

John Kalberer
John Kalberer

Reputation: 5790

You can't wrap a td in an anchor. Do this:

<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td>

Or 

<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>

Upvotes: 3

n8wrl
n8wrl

Reputation: 19765

Define an OnClick event for the td:

<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">...

Upvotes: 2

Related Questions