I have a table with 40 rows, displayed in a div that shows 18 rows and hides the rest using overflow-x:scroll.
I've written a JavaScript code to enable row selection and navigation using the 'up' and 'down' arrow keys on the keyboard.
There are two issues I'm looking to address:
I want the table scrolling to start when the last of the initial 18 rows becomes active.
If I'm on the first record and press 'up' or 'down', I lose the active state of the row.
Here's a link to the jsfiddle where I'm working on solving these problems http://jsfiddle.net/kmcbride/cJjRH/, and below you can find the code snippets.
HTML:
<div class="table">
<table>
<thead>
<tr>
<th><span>End User</span></th>
<th><span>Reseller</span></th>
<th><span>Distributor</span></th>
<th><span>Product Instance</span></th>
<th><span>Created On</span></th>
<th><span>Created By</span></th>
</tr>
</thead>
<tbody>
<!-- Rows go here -->
</tbody>
</table>
<div class="load-more-btn">Load More</div>
</div>
JavaScript (JS):
$(".openPane").click(function() {
// Code snippet for row selection
});
$(document).keydown(function (e) {
// Code snippet for arrow key navigation
});
CSS:
.table {
width: 100%;
height: 400px;
overflow-x: scroll;
}
.table table {
width: 100%;
}
.table table th {
text-align: left;
}
.rowActive {
background-color: #EDF4F9!important;
}