javascript - 使用 javascript 导航 HTML 表格行

Question

我有一个 HTML 表格，每行的第一列都有一个 onclick 事件，按下时将加载内容。我想使用向上和向下箭头键在表格中导航，当我按 Enter 时，触发 oncliick 事件。我不需要导航单元格，只需突出显示该行的行，以便您知道正在显示哪一行的内容。这是我的 table :

<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 来完成这一切。安迪帮忙？

Answer 1

在这里您可以see a solution using JavaScript and 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;
}

您可以see it working on this jsfiddle .