We help IT Professionals succeed at work.

jQuery - Add event handler for on click to redirect and highlight the row clicked

Hi All,

I have a report that has rows showing a billing customer. It has cust_id hidden input field in each row.

Was thinking adding a event on click handler to all those <TR> that contain an input type="hidden" id="cust_id" value="1234"
so the on-click would be on the cell or row. When click the cell or row, hi-light the background of the cells to be blue and then be redirected to another page by grabbing the cust_id value.

This report is created in an APEX region which makes me

thank you for your help,
Watch Question

BILL CarlisleAPEX Developer



<tr><td headers="sub">John</td><td headers="Cust_Name"><input type="hidden" name="f23" value="AS11147">British Solutions, 235 Kathryn Ste C 129</td></tr>
Most Valuable Expert 2018
Distinguished Expert 2019
Here's a general overview, but you'll need to tweak it to you needs. It assumes your table has an ID of myTable, and that your hidden input is called f23. It also adds a class to the clicked TR called blue, that looks like this:

.blue { background-color: blue; }

$('#myTable tr').click(function() {
    $('#myTable .blue').removeClass('blue');
    var hiddenVal = $('input[name=f23]', this).val();
    window.location = "http://yourDomain.com?testVal=" + hiddenVal;

Open in new window

You can see it working here: http://jsfiddle.net/ChrisStanyon/x7yc8433/
BILL CarlisleAPEX Developer


Wow! Thanks, that looks like it will do it!
Will add it now..
BILL CarlisleAPEX Developer


That did it! Thanks so much Chris !!!!