我在表格中有40行的列表，它们嵌套在显示18的div中，并使用overflow-x：scroll隐藏其余的行。
我创建了一个javascript代码，允许我选择一行并使用键盘上的“向上”和“向下”箭头键导航行。
我想解决的两个问题是：
我想在前18行的最后一行设置为活动时开始滚动表格。
如果我在第一张唱片和最后一张唱片上，并按“向上”或“向下”键，我会松开该行的活动状态。
这是我用来尝试解决问题的{jsfiddle http://jsfiddle.net/kmcbride/cJjRH/，下面是代码。
这是我的代码：
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>
<tr class="openPane" id="1">
<td>Melita 1</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="2">
<td>Melita 2</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="3">
<td>Melita 3</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="4">
<td>Melita 4</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="5">
<td>Melita 5</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="6">
<td>Melita 6</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="7">
<td>Melita 7</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="8">
<td>Melita 8</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="9">
<td>Melita 9</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="10">
<td>Melita 10</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="11">
<td>Melita 11</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="12">
<td>Melita 12</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="13">
<td>Melita 13</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="14">
<td>Melita 14</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="15">
<td>Melita 15</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="16">
<td>Melita 16</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="17">
<td>Melita 17</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="18">
<td>Melita 18</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="19">
<td>Melita 19</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="20">
<td>Melita 20</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="21">
<td>Melita 21</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="22">
<td>Melita 22</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="23">
<td>Melita 23</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="24">
<td>Melita 24</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="25">
<td>Melita 25</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="26">
<td>Melita 26</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="27">
<td>Melita 27</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="28">
<td>Melita 28</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="29">
<td>Melita 29</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="30">
<td>Melita 30</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="31">
<td>Melita 31</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="32">
<td>Melita 32</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="33">
<td>Melita 33</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="34">
<td>Melita 34</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="35">
<td>Melita 35</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="36">
<td>Melita 36</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="37">
<td>Melita 37</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="38">
<td>Melita 38</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="39">
<td>Melita 39</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="40">
<td>Melita 40</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
<tr class="openPane" id="41">
<td>Melita 41</td>
<td></td>
<td></td>
<td>WiSe00004</td>
<td>Enabled</td>
<td>7/11/2013 12:56:00PM</td>
</tr>
</tbody>
</table>
<div class="load-more-btn">Load More</div>
</div>
JS：
$(".openPane").click(function() {
if ($(".pane").hasClass('pane-open')) {
$(".openPane").removeClass('rowActive');
$(this).addClass('rowActive');
}else{
$(".pane").slideToggle(250).addClass('pane-open');
$(".openPane").removeClass('rowActive');
$(this).addClass('rowActive');
};
});
$(document).keydown(function (e) {
var currentRow = $(".rowActive").get(0);
switch(event.keyCode)
{
//arrow down
case 40:
$(currentRow).next().addClass("rowActive");
$(currentRow).removeClass("rowActive");
break;
//arrow up
case 38:
$(currentRow).prev().addClass("rowActive");
$(currentRow).removeClass("rowActive");
break;
//esc
case 27:
if ($(".pane").hasClass('pane-open') && !$(".pane").hasClass('pane-pinned')){
$(".pane").slideToggle(250).removeClass('pane-open');
};
break;
}
});
CSS：
.table {
width: 100%;
height: 400px;
overflow-x: scroll;
}
.table table {
width: 100%;
}
.table table th {
text-align: left;
}
.rowActive {
background-color: #EDF4F9!important;
}
答案 0 :(得分：1)
要处理问题2，您只需在实际移动到另一行之前检查$(currentRow).next().length或$(currentRow).prev().length是否为零。
但是，我实际上只是编写一个函数来处理选择一个新行，然后从事件处理程序调用它来获取点击和向上和向下键。这使你不再重复代码三次做同样的事情。在这个新功能中，您只需检查$(newRow).length。
解决问题2.滚动有点困难。
首先，您希望从上下键事件返回false以覆盖这些键导致的默认滚动。
然后，您可以让浏览器使用location.hash = '#' + $(newRow).attr('id');自动滚动到一行，但这会将行放在表格的顶部，而不是等到所选行位于底部，如您所愿。
要获得滚动行为，您需要将position: relative;添加到表格样式中;使用$(currentRow).position()函数查找行相对于表的位置;然后将一些数学传递给$('.table').scrollTop()以滚动那里。
var rowTop = newRow.position().top;
var rowBottom = rowTop + newRow.height();
var $table = $('.table'); // store instead of calling twice
var tableHeight = $table.height();
var currentScroll = $table.scrollTop();
if (rowTop < 0) // row is above our current viewing area
{
// scroll up
$('.table').scrollTop(currentScroll + rowTop);
}
else if (rowBottom > tableHeight) // row is below our current viewing area
{
// scroll down
var scrollAmount = rowBottom - tableHeight;
$('.table').scrollTop(currentScroll + scrollAmount);
}
...此外，您希望overflow-y样式中有.table，而不是overflow-x。
我已经把所有这些都变成了你的小提琴的修改：http://jsfiddle.net/cJjRH/4/
编辑：您还可以查看http://jsfiddle.net/cJjRH/5/稍作修改，以便当您按下第一条记录或超过最后一条记录时，默认浏览器滚动会重新收回记录。当未选择新行时，它从事件处理程序返回true。