Highlighting anchored rows in the tables

  • Resolved mcharudatta

    (@mcharudatta)


    2 years, 1 month ago

    We have created a post with an exploded view of engineering system and table created using TablePress. Each row in the table has some anchor, and the exploded view image has numbered bubbles.

    What I want is when user clicks the number bubble in the image, the relevant row in the table should be highlighted as well. Currently, only the page scrolls to the relevant row entry.

    • This topic was modified 2 years, 1 month ago by mcharudatta.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    For this, I can only recommend using some custom JavaScript, as TablePress does not have a feature for this. Your custom JS code, e.g. using jQuery, would need to listen to the click on the bubble, get the target row ID, select that, and maybe apply a CSS class for styling.

    Regards,
    Tobias

    Thread Starter mcharudatta

    (@mcharudatta)

    Thanks Tobias for your quick response. I have added custom JS code and I am able to get scrolling effect in the table for the anchored row. However, I am not able to get how can I apply the colors to a particular table row. Could you please share any references to understand how I can apply CSS dynamically to the table row?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    I don’t have a direct example, I’m afraid, essentially as this is not something that’s specific to TablePress.
    This also depends on the CSS code that you are using. If it’s jQuery, you could use .toggleClass(), and for native JS, you could use .classList.toggle(), for example. Then, the toggled CSS class would assign the desired styling.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Highlighting anchored rows in the tables’ is closed to new replies.