Question

我有功能，我在桌面上我的问题是我想选择像按下箭头选择第一行等等请帮助mi（我的表内部Bootstrap模态）

这是我的代码。

if(keycode == '40'){
   alert($(this).attr('id'));    		 
 }

<table style="width:100%">
  <tr id="row1">
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr id="row2">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr id="row3">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr id="row4">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Answer 1

如果你想要按键按或做某事，那么这就是适合你的事情

document.onkeypress = function (e) {
  var key = e.charCode || e.keyCode

  if(key == '40'){
   alert("hi");          
 }
};

Answer 2

这是一个开始的例子！

P.S：在使用arraow键导航之前，请单击结果窗口以激活

＆＃13;

$(function() {
  $('table tr:eq(1)').addClass('selected');

  $(document).on("keyup", function(e) {
    if (e.keyCode === 38) {
      e.preventDefault();
      if ($('table tr.selected').index() != 1) {
        $('table tr.selected').removeClass('selected').prev().addClass('selected');
      }
    } else if (e.keyCode === 40) {
      e.preventDefault();
      if ($('table tr.selected').index() != $('table tr:last-child').index()) {
        $('table tr.selected').removeClass('selected').next().addClass('selected');
      }
    }
  });
});

＆＃13;

.selected td {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr id="row1">
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr id="row2">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr id="row3">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr id="row4">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

＆＃13;

按键更改选择

2 个答案: