WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Make row Clickable (30 posts)

  1. Mark2201
    Member
    Posted 11 months ago #

    Hi,

    I recently started using Tablepress and I think it is a great tool, keep up the good work :)

    I have made a table and i want to make a row clickable where it uses the link which I use in the right column.

    This is the site: http://www.forento.be/pensioensparen/

    In the right column there will be links and the whole row should be clickable.

    I have been searching on Google but i have been unable to find a solution for this.

    Many thanks for your help.

    http://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  3. Mark2201
    Member
    Posted 11 months ago #

    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.

  4. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  5. Mark2201
    Member
    Posted 11 months ago #

    Replied too quickly, everything now works!

    Thanks

  6. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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!

  7. Mark2201
    Member
    Posted 11 months ago #

    Hi Tobias,

    I have just added another Table to another page http://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.

  8. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  9. Mark2201
    Member
    Posted 11 months ago #

    Thanks for your quick reply.

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

    Mark

  10. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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

  11. Mark2201
    Member
    Posted 11 months ago #

    Thanks, have a great weekend!

  12. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    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!

  13. BHruska
    Member
    Posted 8 months ago #

    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

  14. TobiasBg
    Member
    Plugin Author

    Posted 8 months ago #

    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

  15. g051798
    Member
    Posted 8 months ago #

    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:

    http://peerlendingserver.com/loans/

    Thanks for any advice,
    John

  16. BHruska
    Member
    Posted 8 months ago #

    Worked perfect. Your support is world class.

    Thanks,
    Brian

  17. g051798
    Member
    Posted 8 months ago #

    Tobias,

    Nevermind, I just got it to work. I had another plugin that was causing the issue. Your plugin rocks!

    I made the mistake of buying wpDataTables. I am getting a refund now. I will be making a donation soon.

    Thanks,
    John

  18. TobiasBg
    Member
    Plugin Author

    Posted 8 months ago #

    Hi John,

    very nice! Good to hear that everything is working now :-)
    And wpDataTables is not a bad program, it just has a different target audience.

    @Brian: You are very welcome! :-)

    Best wishes,
    Tobias

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

  19. NewYears1978
    Member
    Posted 5 months ago #

    Is there a way to make the javascript work on ALL tables. I have some pages with 10-20 tables and having to put 20 javascript codes per page is quite bad :)

  20. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    yes, that's possible. Just change the selector part in the JS code from e.g.

    $('.tablepress-id-1')

    to

    $('.tablepress')

    Regards,
    Tobias

  21. NewYears1978
    Member
    Posted 5 months ago #

    Tobias, you're awesome, thank you!

    I donated, not much but money is tight due to owing taxes in our business. Thanks!

  22. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    good to hear that this helped! Thanks for the nice words and for the donation, I really appreciate it!

    Best wishes,
    Tobias

  23. richardboruta
    Member
    Posted 5 months ago #

    Hi,
    is there a way to make the link open in a new window (i.e. target="_blank")?

    Thanks.

  24. TobiasBg
    Member
    Plugin Author

    Posted 5 months ago #

    Hi,

    no, that's not possible with the JS solution, as that doesn't have the "power" to open a new tab or window.
    (It might be possible to open a popup, but many users have blocked that and consider it bad practice, so I wouldn't recommend that.)

    Regards,
    Tobias

  25. jokerfix
    Member
    Posted 1 month ago #

    Hi TobiasBg

    I have similary problem like user Mark2201 .

    I made table with 5 columns and 5 rows.I want when someone click wherever on first row to be linked on another page.Same like Mark2201 used on this page : http://www.forento.be/beleggen/

    I tried to find in Appearance/Editor table and to put code :
    <tr style="cursor:pointer" onclick="document.location.href="blah.html"

    But I can't find "table code" in Appearance/Editor.
    Do I need to install some plagin?
    How I can do this ?

    Please when you explain me,explain me step by step.Because I am new with using wordpress.

    Thank you for reply and help :)
    Best Regards

  26. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    Hi,

    thanks for your post, and sorry for the trouble.

    As you are using TablePress as well, you won't find the HTML code that you mentioned in an editor, simply because that is generated on the fly by TablePress.
    Using inline JavaScript is a bad practice anyway. Instead, I suggest to look into the JS code from my first reply above. That uses jQuery to trigger a click to a link in the table, when a row is clicked.
    That simply needs to be adjusted to your table and then placed below the table Shortcode on the page, in <script> tags.

    Regards,
    Tobias

  27. jokerfix
    Member
    Posted 1 month ago #

    Thank you Tobias for quickly reply :)

    If I understood I need to put second code in Custom CSS"/ "Plugin Options":

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

    I just didn't understad where to post first code ?

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

    Do I need to change something in this codes?
    Or exactly same codes to put?

    Sorry for disturbing

    Best Regards

  28. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    Hi,

    that second piece of code needs to go into content of the page/post which has the table. Just put that below the Shortcode on the "Edit" window of the page. (Make sure to use the "Text" editor there and not the "Visual" editor.)

    Regards,
    Tobias

  29. jokerfix
    Member
    Posted 1 month ago #

    thank you very much!

    Everything now works!

    Thank you for the quick responses

    Best Regards

  30. TobiasBg
    Member
    Plugin Author

    Posted 1 month ago #

    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!

Reply

You must log in to post.

About this Plugin

About this Topic