Make row Clickable

Hi,

thanks for your question.

This should be possible with some extra JavaScript code, that you could for example add to the end of the page that has the Shortcode:

<script type="text/javascript">
jQuery(document).ready(function($){
  $('.tablepress-id-1').on( 'click', 'tr', function() {
    var $a = $(this).find('a').last();
    if ( $a.length )
      window.location = $a.attr('href');
  } );
});
</script>

When someone clicks on the row, this should trigger a link on the last link that is in the row.
Additionally, you might want to change the mouse cursor for the row hover, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-1 tr:hover {
    cursor: pointer;
}

Regards,
Tobias

Hi Tobias,

Thanks for your quick reply, I have tried to add the code but it unfortunately doesn’t seem to work ??

Do you have any idea what could cause it not to work?

Thank you.

Hi,

it works fine for me on the page that you linked to, above… If I click the first row, it sends me to the URL from the link in that row’s last column.

Regards,
Tobias

Replied too quickly, everything now works!

Thanks

Hi,

Very nice! Good to hear that this helped! ??

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Hi Tobias,

I have just added another Table to another page https://www.forento.be/spaarrekening/

and add the code you mentioned but for some reason the rows are not clickable, do your maybe know what I am doing wrong?

Many thanks.

Hi,

you must not forget to adjust the table ID in the JavaScript code and in the CSS code (from 1 to 3 now). Also, you’ll need some links in the table to use the function ??

Regards,
Tobias

Thanks for your quick reply.

How do I enable this in the CSS for multiple tables?

Mark

Hi Mark,

in the CSS, just copy and paste the CSS code that I posted above and also adjust the table ID in the copy.

Regards,
Tobias

Thanks, have a great weekend!

Hi,

no problem, you are very welcome! ??
Have a great weekend, too!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

I’m trying to use this idea with my table, but I want the link to be in an invisible column. I’ve tried monkeying with the visibility css setting, which makes the data invisible, but the column still takes up space. Ideas?

Thanks,
Brian

Hi Brian,

instead of using the visibility property, you’ll want to use

display: none;

The difference between those is exactly that thing with taking up space while being invisible.

Regards,
Tobias

Hi Tobias,

I am trying to implement this code in my site. However, it is not working. The css is working fine to change the pointer but the javascript code is not working. I have updated the code for the correct table id. I was wondering if you could have a look:

https://peerlendingserver.com/loans/

Thanks for any advice,
John

Worked perfect. Your support is world class.

Thanks,
Brian