CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-table
Oz on Vashon
Oz on Vashon

Reputation: 11

Programatic Scrolling of an HTML Table with Javascript/JQuery

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.

Upvotes: 1

Views: 2258

Answers (1)

mjorissen
mjorissen

Reputation: 91

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.

Upvotes: 1

Related Questions