Table element with link - Support | Kriesi.at

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
June 24, 2023 at 2:21 pm #1411552

Luisgasser
Participant

Hi, is there a way to st a link on the table element – not on a text in any cell?

So if you hover the whole table you can link to another page

Thank you for helping!

June 25, 2023 at 12:19 am #1411583
Mike
Moderator
Hey Stefan,

Assuming that this is a Pricing Table element and you want to add a different link to each inner table:

First add the custom class table-link to the table element developer settings:

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:
```
function custom_script() { ?>
  <script>
(function ($) { 
    $(".table-link .pricing-table-wrap:first-child").wrap(function() {
       var link = $('<a/>').css({'display':'table','width':'33%','float':'left'});
       link.attr('href', 'https://google.com');
       return link;
    });
    $(".table-link .pricing-table-wrap:nth-child(2)").wrap(function() {
       var link = $('<a/>').css({'display':'table','width':'33%','float':'left'});
       link.attr('href', 'https://duckduckgo.com');
       return link;
    });
    $(".table-link .pricing-table-wrap:nth-child(3)").wrap(function() {
       var link = $('<a/>').css({'display':'table','width':'33%','float':'left'});
       link.attr('href', 'https://bing.com');
       return link;
    });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_script');
```
note that each of the three inner tables have a different URL
While this works, it has a drawback that the link changes the display of the table which changes the width, the script adds a hard width to the table to correct this issue but then it is not very response. Perhaps you don’t mind this, but I recommend just using the button that is in the table for your links.

Best regards,
Mike
June 28, 2023 at 2:16 am #1411900
Mike
Moderator
Hi,
Try this updated script for the table, it doesn’t add a link around the tables so it doesn’t change the layout, instead the javascript changes the window location on click. Note in the script you can have the current window location change or open a new tab, depening on which lines are used, the lines with “//” are disabled
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:
```
function custom_link_for_each_pricing_table() { ?>
  <script>
(function($){
    $('.table-link .pricing-table-wrap:first-child').click(function(){
      window.open('https://google.com');               //opens new tab
      //window.location.href = 'https://google.com';     //uses current tab
    });
    $('.table-link .pricing-table-wrap:nth-child(2)').click(function(){
      window.open('https://duckduckgo.com');               //opens new tab
      //window.location.href = 'https://duckduckgo.com';     //uses current tab
    });
    $('.table-link .pricing-table-wrap:nth-child(3)').click(function(){
      window.open('https://bing.com');               //opens new tab
      //window.location.href = 'https://bing.com';     //uses current tab
    });
    $('.table-link .pricing-table-wrap').css({'cursor':'pointer'})
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_link_for_each_pricing_table');
```
Best regards,
Mike
June 30, 2023 at 11:36 am #1412150

Luisgasser
Participant

Thank you for your help, but i have to use a normal data table not a pricing table. So i tried the second version from Mike.

I gave the table the custom class “table-link” and copy the script in my functions.php but it does nothing.

For example i have the link in private content. The Table calls “Ausstattung”

June 30, 2023 at 1:22 pm #1412167
Mike
Moderator
Hi,
Thank you for the link to your site, to make this whole data table with the custom class table-link link to one url, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor instead of the scripts above:
```
function custom_link_for_data_table() { ?>
  <script>
(function($){
    $('.table-link tbody').click(function(){
      window.open('https://google.com');               //opens new tab
      //window.location.href = 'https://google.com';     //uses current tab
    });
    $('.table-link tbody').css({'cursor':'pointer'})
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_link_for_data_table');
```
This will open a new tab, to make it change the location of the current tab remove the line:
window.open('https://google.com'); //opens new tab
and remove the // from the second line and adjust the url to suit.

Best regards,
Mike
June 30, 2023 at 2:58 pm #1412173

Luisgasser
Participant

works great – thank you!

June 30, 2023 at 3:55 pm #1412180

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Table element with link’ is closed to new replies.