Make table cells with clickable and respect tabbed browsing

Question

Right now I'm doing a td.click() and then window.location = td.find('a').attr('href') but it doesn't work if I'm clicking to make a new tab.

And I can't programmatically click the <a>.

Any ideas?

Feel free to fork this fiddle http://jsfiddle.net/uDQPr/

Answer 1

You could make the <a> fill up the entire cell. That way, you won't need any additional JavaScript to handle the click event. Adding target="_blank" to your <a> link will make it always open in a new tab (or a new window, for browsers that don't support tabs). Working example at http://jsfiddle.net/vTyAc/2/.

Here's the table code:

<table>
    <tr>
        <td>
            <a href="http://apple.com" target="_blank">Apple</a>
        </td>
        <td>
            <a href="http://youtube.com" target="_blank">YouTube</a>
        </td>
    </tr>
</table>

And the CSS:

td {
    border: 1px solid;
}
a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px
}
a:hover {
    text-decoration: underline;
}