Question

这是我当前的代码：
在这里，我运行一些代码，并在用户单击表格行时突出显示表格行。

$("#orders tr").click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');

  value = $(this).find('td:first').html();
});

table {
  float: left;
  border: 1px solid black;
  border-collapse: collapse;
  border-color: #a0a0a0ad;
}

table td {
  padding: 5px;
}

table th {
  background: #dcdcdc;
}

table tr {
  height: 29px;
}

.selected {
  background-color: #008cb9;
  color: #FFF;
}

#orders {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
  <thead>
    <th>ID</th>
    <th>Datum</th>
    <th>Betaling</th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

我希望能够使用向上键和向下键浏览表行，而不是单击表行；以及调用方法。我该怎么做？

Answer 1

您可以在jumboMode上添加一个事件列表器，然后检查是否按下了UP / Down键，并将keydown类移至下一个或上一个selected：

tr

$("#orders tr").click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  value = $(this).find('td:first').html();
});

$(document).on('keydown', function(e) {
  e.preventDefault();

  if (e.which == 38) {
    $('.selected').prev('tr').addClass('selected').siblings().removeClass('selected');
  } else if (e.which == 40) {
    $('.selected').next('tr').addClass('selected').siblings().removeClass('selected');
  }

  $('html, body').scrollTop($('.selected').offset().top - 100);

  /*$('.selected')[0].scrollIntoView({
    behavior: "smooth",
    block: "end"
  });*/
});

table {
  float: left;
  border: 1px solid black;
  border-collapse: collapse;
  border-color: #a0a0a0ad;
}

table td {
  padding: 5px;
}

table th {
  background: #dcdcdc;
}

table tr {
  height: 29px;
}

.selected {
  background-color: #008cb9;
  color: #FFF;
}

#orders {
  width: 100%;
}

Answer 2

以下是实现此目的的步骤。

步骤1。跟踪keydown上的document事件

步骤2。检查keyCode==38(up arrow)和keyCode==40(down arrow)

第3步。如果为true，则在addClass('selected')上添加tr并通过siblings()从removeClass('selected')中删除

$("#orders tr").click(function() {
  $(this).addClass('selected').siblings().removeClass('selected');
  value = $(this).find('td:first').html();
});

$(document).on('keydown', function(e) {
  e.preventDefault();

  if (e.keyCode== 38) {
    $('.selected').prev('tr').addClass('selected').siblings().removeClass('selected');
  } else if (e.keyCode== 40) {
    $('.selected').next('tr').addClass('selected').siblings().removeClass('selected');
  }

});

table {
  float: left;
  border: 1px solid black;
  border-collapse: collapse;
  border-color: #a0a0a0ad;
}

table td {
  padding: 5px;
}

table th {
  background: #dcdcdc;
}

table tr {
  height: 29px;
}

.selected {
  background-color: #008cb9;
  color: #FFF;
}

#orders {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
  <thead>
    <th>ID</th>
    <th>Datum</th>
    <th>Betaling</th>
  </thead>
  <tbody>
    <tr class='selected'>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 3

$("#orders tr").click(function() {

  $(this).addClass('selected').siblings().removeClass('selected');
  value = $(this).find('td:first').html();

  /// my code to show data and stuff







  //////////////////////////
});

$('body').keyup(function(e) {

  e.preventDefault();
  if ($('.selected').length == 0) {
    $($('tr')[1]).addClass('selected')
    return;
  }
  if (e.which == 38) {

    $('.selected').prev('tr').addClass('selected').siblings().removeClass('selected');

  }
  if (e.which == 40) {
    $('.selected').next('tr').addClass('selected').siblings().removeClass('selected');

  }
})

table {
  float: left;
  border: 1px solid black;
  border-collapse: collapse;
  border-color: #a0a0a0ad;
}

table td {
  padding: 5px;
}

table th {
  background: #dcdcdc;
}

table tr {
  height: 29px;
}

.selected {
  background-color: #008cb9;
  color: #FFF;
}

#orders {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="orders" id="orders" border="1">
  <thead>
    <th>ID</th>
    <th>Datum</th>
    <th>Betaling</th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

您可以使用上面的代码！

使用onkeydown或onkeyup浏览表TR

3 个答案: