Tom Tom - 1 year ago 162
jQuery Question

JQuery - Clickable table row, except last cell

I'm trying to user JQuery to make a table row clickable and redirect to a URL which is hidden in the first cell.
I've got an image in the last column of the table which should redirect to a different URL.

JQuery is as follows.

$(function () {
$('#link-table td:first-child').hide();

$('#link-table tr').hover(function () {

$('#link-table tr').click(function () {
location.href = $(this).find('td a').attr('href');

Clicking the row works, clicking the image hyperlink in the last cell redirects to the same URL as clicking the row which isn't what I want.

I tried using this code for the click event

$('#link-table tr td:not(:last-child))').click(function () {
location.href = $(this).find('td a').attr('href');

Clicking the image hyperlink in the last cell works but clicking the row now redirects to the URL attached to the image hyperlink in the last cell.

How can I get it so clicking the row redirects to one URL, clicking the hyperlink in the last cell redirects to another?

Answer Source
$('#link-table tr td:not(:last-child)').click(function () {
        location.href = $(this).find('td a').attr('href');

Your $(this) is the '#link-table tr td:not(:last-child))', you can find the tr with var tr = $(this).closest('tr'); Then you can use var tr to do whatever you like

then find 'td a' etc.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download