/    Sign up×
Community /Pin to ProfileBookmark

Scroll to selected row in a table

I have searched for hours to find a simple solution how to automatically scroll down to the last selected row in a table. No solution works.

The last line in this table have the class “selected”. I simply want to show that a record has been added.

Any tip?

https://jsfiddle.net/ndbhta6m/2/

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumFeb 24.2022 — I found a fix but no explanation why this doesn't work. The fix is
  • 1. Using a table cell instead of the complete row

  • 2. Applying a short delay


  • ``<i>
    </i> var elm = document.querySelector('table tbody tr.selected td');
    setTimeout(() =&gt; {
    elm.scrollIntoView(false);
    }, 10)<i>
    </i>
    ``
    Copy linkTweet thisAlerts:
    @SempervivumFeb 24.2022 — PS: Found an explanation why it doesn't work for the `tr</C> element: You applied <C>display: contents;</C> to the rows.
    <QUOTE><i>&gt;</i>display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.</QUOTE>

    <URL url="https://caniuse.com/css-display-contents">https://caniuse.com/css-display-contents</URL><br/>
    The <C>
    tr`
    elements disappear from the rendered page which is also visible in the HTML inspector.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 24.2022 — PPS: It seems to me that I found an explanation for the issue that a delay is necessary: When I open the page for the very first time, scrolling to the selected row works. However when I scroll to the top manually and then reload scrolling does not work. My explanation: The browser remembers the latest scroll position and scrolls to it when reloading the page. This is overriding the scrolling by the javascript.
    ×

    Success!

    Help @sibert spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 4.20,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...