我有一个HTML表，该表在每行的第一列中都有一个onclick事件，该事件将在按下时加载内容。我想使用向上和向下箭头键浏览表格，然后按Enter键，触发oncliick事件。我不需要导航单元格，只需导航行即可突出显示该行，这样您就可以知道要显示的行内容。这是我的桌子：
<table class="table_id">
<thead style="background: #DAE6F0;">
<th width="49"></th>
<th width="106">Location</th>
<th width="107">SelectionType</th>
</thead>
<tbody>
@foreach (var item in Model.List)
{
<tr>
<td style="width: 49px;"><a onclick=" getTeplate(@item.Id); ">Display</a></td>
<td style="width: 120px; text-align: center">@Html.DisplayFor(modelItem => item.AdvertisementLocation)</td>
<td style="width: 107px; text-align: center">@Html.DisplayFor(modelItem => item.AdvertisementSelectionType)</td>
</tr>
}
</tbody>
</table>
我的CSS设置为使用滚动条使表格达到设定的高度：
tbody {
border-collapse: collapse;
overflow: auto;
max-height: 486px;
}
thead, tbody {
border-collapse: collapse;
border: 1px solid black;
display: block;
}
th {
border: 1px solid black;
font-size: 1.3em;
text-align: center;
padding-left: 0;
}
我想用JS完成所有这些工作。安迪帮忙？
在这里，您可以看到使用JavaScript和jQuery的解决方案（注意：为了方便起见，我将表从class="table_id"更改id="table_id"为）：
var isTableActive = false;
// every time that there's a click, detect if it was on the table or outside of it
$(document).on("click", function(e) {
isTableActive = $.contains(document.getElementById("table_id"), e.target);
});
// the first row will be active by default
$("#table_id tbody tr:first-child").addClass("active");
// focus the clicked row (no need to scroll because it's visible
$("#table_id tbody tr").on("click", function() {
$("#table_id tbody tr.active").removeClass("active");
$(this).addClass("active");
});
// when a key is pressed
$(document).on("keydown", function(e) {
switch(e.keyCode) {
case 38: // up
if ($("#table_id tbody tr.active").prev().length) {
$("#table_id tbody tr.active").removeClass("active").prev().addClass("active");
}
break;
case 40: // down
if ($("#table_id tbody tr.active").next().length) {
$("#table_id tbody tr.active").removeClass("active").next().addClass("active");
}
break;
case 13: // enter
$("#table_id tbody tr.active").find("a").click();
break;
}
// the selected element will always be visible on top
$("#table_id tbody").scrollTop(
$("#table_id tbody tr.active").offset().top +
$("#table_id tbody").scrollTop() -
$("#table_id tbody").offset().top
);
// prevent the scrolling effect if the last active element was the table
if (isTableActive) {
e.preventDefault();
return false;
}
});
（可选）您可以添加一些CSS以突出显示活动行，这将帮助您知道将触发哪个行操作：
#table_id tbody tr.active {
background:#f0f0f0;
}
您可以看到它在此jsfiddle上运行。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句