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,

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

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,

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

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

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!

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