Scroll the table automatically when the currently selected row is the second-to-last row

Question

Scroll the table automatically when the currently selected row is the second-to-last row

Having trouble with a scrolling table issue. https://i.sstatic.net/PFyN3.png

Upon page load, the first row (ROW 1) is automatically selected and highlighted. Clicking the next button selects and highlights the subsequent rows. However, once ROW >= 8 (e.g. ROW 9, 10...etc.) are selected, the table fails to scroll automatically, causing the currently selected row to be out of view even though it's highlighted. Expected behavior can be seen in this image: https://i.sstatic.net/xtTyL.png

When ROW 8 is selected, automatic scrolling should kick in. This ensures that the next row (ROW 9) stays visible while the previous rows remain hidden.

The goal is to always have the currently selected row and the next row visible at the same time when navigating using the next/previous buttons. The table should continue to scroll until reaching the last visible row and then shift to show the row before it.

I'm stuck on how to fix this issue. Any assistance would be greatly appreciated.

Best Regards, Ken.

javascript jquery html css angularjs

Answer 1

Answer №1

In the following code snippet, the use of the window object is demonstrated to scroll to a specific tr element within a table.

When the next/prev buttons are clicked, the selectedIndex value is incremented/decremented accordingly and the page scrolls to that particular row in the table.

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

app.controller("ctrl", function($scope) {
  $scope.selectedIndex = 0;
  $scope.rows = ["Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8", "Row9", "Row10", "Row11", "Row12", "Row13", "Row14", "Row15", "Row16", "Row17", "Row18"];

  $scope.NextRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === $scope.rows.length - 1 ? $scope.rows.length - 1 : $scope.selectedIndex + 1;
    var w = $(window);
    var row = $('table').find('tr').eq($scope.selectedIndex);
    if (row.length) {
      w.scrollTop(row.offset().top - (w.height() / 2));
    }
  }

  $scope.PrevRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === 0 ? 0 : $scope.selectedIndex - 1;;
    var w = $(window);
    var row = $('table').find('tr').eq($scope.selectedIndex);

    if (row.length) {
      w.scrollTop(row.offset().top - (w.height() / 2));
    }
  }
});

body {
  padding-top: 50px;
}

.anchor {
  border: 2px dashed DarkOrchid;
  padding: 5px 5px 5px 5px;
}

.fixed-header {
  background-color: rgba(0, 0, 0, 0.2);
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-header>a {
  display: inline-block;
  margin: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">

  <div class="fixed-header">
    <button ng-click="PrevRow()">Previous button </button>
    <button href="" ng-click="NextRow()">Next button </button>
  </div>

  <div>
    <table>
      <tbody>
        <tr ng-repeat="row in rows">
          <td class="anchor" ng-style="selectedIndex == $index && {'background-color':'lightblue'}">{{row}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

Answer 2

In the following code snippet, the use of the window object is demonstrated to scroll to a specific tr element within a table.

When the next/prev buttons are clicked, the selectedIndex value is incremented/decremented accordingly and the page scrolls to that particular row in the table.

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

app.controller("ctrl", function($scope) {
  $scope.selectedIndex = 0;
  $scope.rows = ["Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8", "Row9", "Row10", "Row11", "Row12", "Row13", "Row14", "Row15", "Row16", "Row17", "Row18"];

  $scope.NextRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === $scope.rows.length - 1 ? $scope.rows.length - 1 : $scope.selectedIndex + 1;
    var w = $(window);
    var row = $('table').find('tr').eq($scope.selectedIndex);
    if (row.length) {
      w.scrollTop(row.offset().top - (w.height() / 2));
    }
  }

  $scope.PrevRow = function() {
    $scope.selectedIndex = $scope.selectedIndex === 0 ? 0 : $scope.selectedIndex - 1;;
    var w = $(window);
    var row = $('table').find('tr').eq($scope.selectedIndex);

    if (row.length) {
      w.scrollTop(row.offset().top - (w.height() / 2));
    }
  }
});

body {
  padding-top: 50px;
}

.anchor {
  border: 2px dashed DarkOrchid;
  padding: 5px 5px 5px 5px;
}

.fixed-header {
  background-color: rgba(0, 0, 0, 0.2);
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.fixed-header>a {
  display: inline-block;
  margin: 5px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app" ng-controller="ctrl">

  <div class="fixed-header">
    <button ng-click="PrevRow()">Previous button </button>
    <button href="" ng-click="NextRow()">Next button </button>
  </div>

  <div>
    <table>
      <tbody>
        <tr ng-repeat="row in rows">
          <td class="anchor" ng-style="selectedIndex == $index && {'background-color':'lightblue'}">{{row}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

Scroll the table automatically when the currently selected row is the second-to-last row

Answer №1

Similar questions

Troubleshooting jQuery window scrolling and detecting element positions issue

Struggles with Managing 5-Digit Unicode Characters with jQuery

Focus on a specific div element while bypassing its parent

In terms of function efficiency, what yields better results: using conditional execution or employing conditional exit?

Another method to verify an input using HTML5 regex and JavaScript

Learn how to easily alter the background color of a div in real-time by utilizing a color picker or color swatches feature in your

Using a uibCollapse within a nested directive element may not function as expected

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

JavaScript unable to access elements during page loading

How can I transform a JSON object into a series of nested form fields?

Exploring Non Blocking IO through an Example

how to bind data to an array in Angular

What is the method for determining the data type of a column in an Excel sheet that has been

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

What is the best method to activate or deactivate a link with jQuery?

The jQuery UI Tab is failing to scroll within its container

Eliminate the ending slash from your Nuxt application

How can I extract data from the 'ngx-quill' editor when integrating it with a FormBuilder in Angular?

Enhance your cloud functions by updating data

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View