Programatic Scrolling of an HTML Table with Javascript/JQuery

Question

I have done extensive Google searches and implemented a number of solutions found here at stack overflow and at other sites but have not been able to get my table to scroll under program control.

I am implementing a scrolling table of variable names to use in a plot. I have 200+ variables so I want users to be able to type some fragment of a variable's name and show that variable in the list by scrolling. I have this all working except the scrolling part.

This is what a table looks like:

http://www.oceanatlas.com/images/list1.png

This is the HTML that defines the table:

<div id="ySeriesParamChooser" class="ParamChooser">
  <table id="yparamtable" cellspacing="0" border="1" >
    <thead class="fixedHeader">
      <tr>
         <th colspan="3">Primary Y Axis</th>
      </tr>
    </thead>
    <tbody class="scrollContent" style="text-align: center;">
       <tr>
           <td>Cell Content 1</td>
           <td>Cell Content 2</td>
           <td>Cell Content 3</td>
       </tr>
    </tbody>
  </table>
</div>

I create the contents of the table programatically using Javascript. As you can see from the image link above the table looks and functions as I designed.

Here is the some relevant CSS:

html>body tbody.scrollContent {
    display: block;
    height: 193px;
    overflow: auto;
    table-layout: fixed;
    font-family: Helvetica, Palatino, Arial, sans-serif; 
    font-size: 0.8em;     
    width: 100%
}

.ParamChooser {
     padding: 0px 10px 0px 0px;
     float:left;
     font-family: Droid Sans, Arial, Helvetica, sans-serif; 
     font-size: .8em;
     cursor:default;
 }

What I have tried:

// this code correctly find the nth <tr> in the table
var symTarg = "#" + this.jqSel ;
var row = $(symTarg).find('tr').eq(n);

row.scrollIntoView();   // this doesn’t do anything

// this didn’t do anything
var scrollTarg = "#" + this.jqSel + “.scrolltable";  // jqSel == "yparamtable"
var row = $(symTarg).find('tr').eq(n);
if (row.length) {
    $(scrollTarg).scrollTop(row.offset().top - ($(scrollTarg).height()/2));
 }

// tried this to see if I could just scroll to the last row
var symTarg = "#" + this.jqSel ;  // jqSel == "yparamtable"
var rowpos = $(symTarg).find('tr:last').position();  // finds last <tr>
var content = $(symTarg).find('tbody.scrollcontent');
$(content).scrollTop(rowpos.top);

So, what am I doing wrong? I am an experienced programmer but new to UI programming in Javascript.

Welcome to Stack Overflow! I hope you enjoy your stay. No, you're done nothing wrong. Feel free to comment on an answer if you need clarification, and don't forget to upvote and / or accept good answers. — Smurfton
– Smurfton, Commented Feb 2, 2016 at 3:41

mjorissen · Accepted Answer · 2016-02-05 19:23:12Z

1

Here is a fiddle of the scrolling working : https://jsfiddle.net/070vx0oo/7/

First, in order to scroll to a specific element, you have to select only the element and not its parent, to get its position :

var rowpos = $('.scrollContent > tr:eq(4)').position(); // finds the 5th <tr> child of .scrollContent

Here the elements are the TRs. The position is relative to the first parent, which is .scrollContent (tbody)

Then, we need to scroll INTO this parent. So we select .scrollContent which is the parent we are talking about, and use scrollTop().

var content = $('.scrollContent');
$(content).scrollTop(rowpos.top);

So we scroll to the position of our TD.

Also note that I had to add this CSS to our parent (remember, the one called .scrollContent) so that we can scroll into it.

.scrollContent{
  display:block; /* Allows us to resize the element */
  overflow: auto; /* Automatically adds scrollbars if content overflows */
  height:100px; /* Our custom table height */
  position:relative; /* Important ! so javascript get accurate position */
}

Now you just have to implement it in your own JavaScript, by selecting the correct TR for var rows.

I hope it helped you to understand.

edited Feb 5, 2016 at 19:23

answered Jan 29, 2016 at 20:51

mjorissen

916 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oz on Vashon Over a year ago

Thank you for your response but I have to admit that I am a bit more confused. You have inverted my understanding of the tr and td tags. I create tr tags to hold rows that have multiple columns that contain the var name, a selection checkmark, and a link to a UI to allows the variable's style to be edited (see link). That's why I search for a matching <tr> whereas you are searching for a matching <td>. Can you provide an example of how I can make the <tr>s scroll? Thanks again! link

mjorissen Over a year ago

Of course I adapted my code to your HTML structure, and according to the picture you gave. So yes, a tr should basically be just a row, and contain multiple td inside. But based on the picture and your HTML I thought there was only one column. But as I mentioned in my answer, you just have to select the correct parent. I'm going to edit it.

Oz on Vashon Over a year ago

Sorry about that...I thought everything happened at the row level so I omitted the columns which are created programatically. Your code though did give me the clue I needed to solve my problem and it was exactly as you suggested--I wasn't selecting the right parent. I changed my selector for the scroll content to: var scrollTarg = "#" + this.jqSel + " > tbody"; and now it works! Thank you!

Oz on Vashon Over a year ago

Sorry newbie question--how do I mark as answered? Do I use the Answer Your Question button?

Collectives™ on Stack Overflow

Programatic Scrolling of an HTML Table with Javascript/JQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related