Add Links to Table Rows on Hover

Hi,

thanks for your post, and sorry for the trouble.

I’m not really sure what you mean here. Do you mean that there should not be a link when the mouse is not above the table?

Regards,
Tobias

Hi

For example, I have a table with 5 columns and 10 rows. I have it set for rows to change color when you hover over a row. I’d like to assign a link to the entire row on hover.

ROW 1 = LINK 1
ROW 2 = LINK 2
ROW 3 = LINK 3

etc.

Does that make sense?

Thanks!

Hi,

ah, so instead of just the actual link being clickable, you want to “catch” a click anywhere in the row and then proceed with the link?

For that, please take a look at the suggestion of JavaScript solution at https://www.ads-software.com/support/topic/make-row-clickable?replies=30

Regards,
Tobias

Yes!

This code works, but how do I target a new window on the link?

<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>

And one follow-up question.

The links are automatically RED in my table per the theme. The row hover is also RED, so you can’t see the links when you hover. What custom CSS would I use to make the text links turn WHITE on RED hover?

Hi,

thanks for your post, and sorry for the trouble.

I’m afraid that opening those links in a new window is not possible that easily ?? You could try to use some JavaScript code that opens a popup with the link, but you might then run into issues with popup blockers. Also, forcing links to open in a new window is bad from a usability perspective, so that I don’t recommend this.

For the link color, please try adding this “Custom CSS”:

.tablepress-id-1 tr:hover a {
  color: #ffffff !important;
}

Regards,
Tobias

Thanks for the help. The reason for the new window target was to link to outside sites. No worries, appreciate the support!

Hi,

no problem, you are very welcome! ?? 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,

This is my first time with TablePress.

I imported a .csv file and it displays, but the links are not clickable.

I used your javascript code and changed the code to
$('.tablepress-id-16').on( 'click', 'tr', function() {
referencing table ID 16 and added the css, but the links are not clickable. I put their old table back up as it is clickable. If you like I can replace with their new table.

I added a table via a .csv import file and it displayed except the links do not work. I added your JavaScript from above
$('.tablepress-id-16').on( 'click', 'tr', function() {
renaming the table Id to 16 and adding the CSS
.tablepress-id-16 tr:hover a {.

They are still not links. This is my first time with TablePress, so I am learning. I have added back the previous file that is working. I can add the new file if needed.

https://belmontdistrict.org/businesses/

Thanks,
doak

Hi,

thanks for your post, and sorry for the trouble.

From what I can see, the table on the page from your link has the ID 8 and not 16. Therefore, please change the 16 to 8 in your code on that page.

Regards,
Tobias

I did but the same result..

<p>[table id=16 /]</p>
<p><script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘.tablepress-id-16’).on( ‘click’, ‘tr’, function() {
var $a = $(this).find(‘a’).last();
if ( $a.length )
window.location = $a.attr(‘href’);
} );
});
</script></p>

Also the same result for…..
which is <p>[table id=15 /]</p>

https://belmontdistrict.org/about/

Hi,

the problem on the two pages https://belmontdistrict.org/about/ and https://belmontdistrict.org/businesses/ is that the tables do not contain actual clickable links. They only contain the URLs. You’ll e.g. need to use the Automatic URL conversion Extension from https://tablepress.org/extensions/automatic-url-conversion/ to make the links clickable first.

Regards,
Tobias

Tobias,

Fantastic, works like a charm. Thanks for the prompt response. Importing a .csv is what most clients fell comfortable doing. For your info, they wanted to use Easy Table, but it would not import & display the .csv.

Hi,

no problem, you are very welcome! ?? 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!