My table is filled with information about job listings that a user is interested in. Here's how the structure looks:
<div class="container">
<table class="table-responsive table-hover table-bordered col-sm-12 col-md-6 col-md-offset-1 col-lg-6 col-lg-offset-1" id="resultsTable" border="0" cellspacing="0" cellpadding="0"><tbody>
<tr class="selectable selected">
<td class="summary">A Summary</td>
</tr>
<tr>
<td class="detail" id="32113607" style="display: table-cell;">This is some detail</td>
</tr>
<!-- More rows here............... -->
</tbody></table>
</div>
I've also implemented a function that manages expanding and collapsing the table rows.
$(function () {
//Clicking on a row in the table will hide the other rows...
$("#resultsTable").on('click', '.selectable', function (e) {
$(this).addClass('selected').siblings().removeClass('selected');
$(this).siblings().children("td.detail").slideUp();
$(this).next("tr").children("td.detail").slideDown();
});
});
In addition to this JavaScript functionality, there are some basic CSS styles applied. You can view all of this in action through this fiddle link: http://jsfiddle.net/v9ec3/1176/
An interesting issue arises when navigating through the records: starting from the bottom up works fine, but going from top to bottom causes the display to jump midway during scrolling.
Upon inspecting the code using developer tools, it seems like jQuery is attempting to adjust the scroll offset during animation transitions.
Various methods have been tested to address this problem:
- e.preventDefault()
- e.stopPropogation()
- adjusting width/height properties
- modifying overflow-y attribute
- implementing animations (such as scrolling to specific ID)
- applying CSS transitions