# Making an entire td link while having a different link within (JQuery)

**URL:** <https://meta.discourse.org/t/making-an-entire-td-link-while-having-a-different-link-within-jquery/39501>\
**Category:** UX\
**Created:** [2월 12, 2016, 9:10오후 UTC](https://meta.discourse.org/t/making-an-entire-td-link-while-having-a-different-link-within-jquery/39501 "2016-02-12T21:10:55Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![charleswalter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/charleswalter/32/116433_2.png) [@charleswalter](https://meta.discourse.org/u/charleswalter)\
**Post date:** [2월 12, 2016, 9:10오후 UTC](https://meta.discourse.org/t/making-an-entire-td-link-while-having-a-different-link-within-jquery/39501/1 "2016-02-12T21:10:55Z")

</div>

Has anyone else tried this?

I wanted to make the call to action a bit more active so users would be inclined to click on a topic, so I added a hover/link on the entire TD. One complication is that we had moved the category link just underneath in the same cell.

 ![](https://global.discourse-cdn.com/meta/original/3X/7/8/78a8dae3a64409b7f709361cab5fbe23219db140.png)

Here’s the code I’m using..

For the topic area…

```
<td class='main-link clickable-cell clearfix' data-href='{{topic.lastUnreadUrl}}' colspan="{{titleColSpan}}">
  {{raw "topic-status" topic=topic}}
  {{topic-link topic}}
  {{#if controller.showTopicPostBadges}}
    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
  {{/if}}
  {{plugin-outlet "topic-list-tags"}}
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
  {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  
  {{#unless controller.hideCategory}}
  {{#unless topic.isPinnedUncategorized}}
  <div class="foro">{{category-link content.category}}</div>
    {{/unless}}
{{/unless}}
</td>

```

Jquery. the event.stopPropagation was key so that the TD click did not interfere.

```
<script>
jQuery(document).ready(function($) {
    $(".clickable-cell").click(function() {
        window.document.location = $(this).data("href");
    });
    $(".clickable-cell a").click(function (event) {
        event.stopPropagation();
    });
});
</script>

```

And some CSS to ensure that the cell still acted like a link, with some emphasis that the category link is its own link

```
.clickable-cell:hover {background-color: gold; cursor: pointer;}
.clickable-cell a:hover {text-decoration: none;}
.foro a.badge-wrapper.bullet span.badge-category:hover {font-weight: bold;}

```

Curious to see how it performs and feedback is always welcome.  
[https://www.helloforos.com/](https://www.helloforos.com/)

---

_[View the full topic](https://meta.discourse.org/t/making-an-entire-td-link-while-having-a-different-link-within-jquery/39501)._