39113003

Moving to the selected row in the HTML table when the table has scrollbar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="scrolling-container">
    <table id="data" border>
      <thead>
          <tr>
              <th>#</th>
              <th>hedfgader2</th>
              <th>header3</th>
              <th>header4</th>
              <th>header5</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>2</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>
          <tr>
              <td>3</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>
          <tr>
              <td>4</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>
          <tr>
              <td>5</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>
          <tr>
              <td>6</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>      
           <tr>
              <td>7</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>      
           <tr>
              <td>8</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>      
           <tr>
              <td>9</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
              <td>data</td>
          </tr>      
      </tbody>
    </table>
  </div>
  <!-- As an example, scroll to the 40th element -->
  <button ng-click="scrollItemIntoView()">
    Scroll to Bottom
  </button>
</div>
<input type="button"...

CSS

div.scrolling-container {
  height: 70px;
  overflow: scroll;
}
.highlight {
    background-color:yellow;
}

JavaScript

function highlight(tableIndex) {
    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > $('#data tbody tr').length )
        tableIndex = 0;
    
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0)
    {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');
        
        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');
    }
}

$('#goto_first').click(function() {
    highlight(5);
});

var app = angular.module("myApp", []);

app.controller("MainCtrl", function($scope) {

	// Populate the table with 0..100
  $scope.items = [];
  for (var i = 0; i < 100; i++) {
    $scope.items.push(i);
  }

	// This function is called when the button is clicked.
  $scope.scrollItemIntoView = function() {

    var scrollElement = $('.scrolling-container')[0];
    var itemToView = $('tr')[4];
    
    // This is where it all goes down.
    if (!itemIsInViewport(itemToView)) {
      scrollElement.scrollTop = itemToView.offsetTop;
    }

		// Determines if the item is already in view.
    function itemIsInViewport(item) {
      var $scrollElement = $('.scrolling-container');
      var upperBound = item.offsetTop;
      var lowerBound = item.offsetTop - $scrollElement.innerHeight();
      var currentPosition = $scrollElement.scrollTop();
      return lowerBound < currentPosition && currentPosition < upperBound;
    }

  }

});