Add Links to Table Rows on Hover
-
What’s the best way to add a different custom link to each row when you mouseover?
-
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,
TobiasHi
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 3etc.
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://wordpress.org/support/topic/make-row-clickable?replies=30
Regards,
TobiasYes!
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,
TobiasThanks 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,
TobiasP.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.
http://belmontdistrict.org/businesses/
Thanks,
doakHi,
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<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>Hi,
the problem on the two pages http://belmontdistrict.org/about/ and http://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,
TobiasTobias,
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,
TobiasP.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!
The topic ‘Add Links to Table Rows on Hover’ is closed to new replies.