Question

I have a table, the table row should be clickable ‘except’ for the last td in that row. So when clicked it opens a new window to a new URL.

However in that same table row, the last td needs to be clickable also to expand the table row for more details. At the moment I have this working but rather than having the one td clickable the whole row is (which I don’t want).

The code for the expand table row is: –

$("#report tr:odd").addClass("odd");
        $("#report tr:not(.odd)").hide();
        $("#report tr:first-child").show();

        $("#report tr.odd").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");

        });

So overall I need the row clickable expect for the last td.

The last td I want to be able to expand the table row by clicking on that td NOT the whole row?

Any help would be great – I know what I need I just don’t know how to write it.

Answer 1

Instead of applying the click event to the entire tr, you could apply it to the relevant cells instead like so:

$("#report tr.odd td:not(:last-child)")

That would select every td in the row except for the last one in the row.

To then access the next tr, you’ll need to change that selector too:

$(this).parent().next("tr").toggle();

This will get the parent of the td you’ve clicked on (a tr) then find the next one. If the .arrow class is applied to a tr, the same needs to happen there:

$(this).parent().find(".arrow").toggleClass("up");