Question

我正在寻找通过按键箭头像38,40这个班级来移动这个班级的兄弟姐妹。但是，我不知道如何解决这个问题。这是代码：

这只是简单的html表格代码

<table class="table table-striped table-bordered table-hover 
ConfigPatternTable">
  <thead>
    <tr>
      <th>PatNum</th>
      <th>varCode_M</th>
      <th>varCode_E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Үйлдлийн хандлага</td>
      <td>Tends to Act</td>
      <td>Шаргуу</td>
    </tr>
     <tr>
      <td>1</td>
      <td>Үйлдлийн хандлага</td>
      <td>Tends to Act</td>
      <td>Шаргуу</td>
    </tr>
     <tr>
      <td>1</td>
      <td>Үйлдлийн хандлага</td>
      <td>Tends to Act</td>
      <td>Шаргуу</td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>

这是我的javascript到目前为止，当您点击td时，它会找到最接近的tr并在其上添加带背景的课程。

$(document).on('click','.ConfigPatternTable tr',function(){
    $(".ConfigPatternTable").find("tbody > tr").removeClass("selectedtr");
    $(this).closest('tr').addClass("selectedtr");   
});

此javascript是我想弄清楚

$(document).keydown(function(event) {
  $(".ConfigPatternTable").keydown(function(event) {

    if (event.keyCode == 38) {
      console.log("testing also this")
    } else if (event.keyCode == 40) {
      console.log("jsut testing this")
    }
  });
});

这是我的Jsfiddle

使用此代码段希望我达到问题要求

＆＃13;

$(document).keydown(function(event) {
  $(".ConfigPatternTable").keydown(function(event) {
    if (event.keyCode == 38) {
      console.log("testing also this")
    } else if (event.keyCode == 40) {
      console.log("jsut testing this")
    }
  });
});

$(document).on('click','.ConfigPatternTable tr',function(){
	$(".ConfigPatternTable").find("tbody > tr").removeClass("selectedtr");
	$(this).closest('tr').addClass("selectedtr");	
});

＆＃13;

.selectedtr > td{
	background-color:rgba(131, 78, 77, 0.4) !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover ConfigPatternTable">
  <thead>
    <tr>
      <th>PatNum</th>
      <th>varCode_M</th>
      <th>varCode_E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Үйлдлийн хандлага</td>
      <td>Tends to Act</td>
      <td>Шаргуу</td>
    </tr>
     <tr>
      <td>1</td>
      <td>Үйлдлийн хандлага</td>
      <td>Tends to Act</td>
      <td>Шаргуу</td>
    </tr>
     <tr>
      <td>1</td>
      <td>Үйлдлийн хандлага</td>
      <td>Tends to Act</td>
      <td>Шаргуу</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

  $(document).on('keydown', function(e){
        var slcttr = $(".selectedtr");
          if(e.keyCode == 38) { 
             $( ".selectedtr" ).prev().addClass( "selectedtr" );
             slcttr.removeClass("selectedtr");
          } 
          else if (e.keyCode == 40){
              $( ".selectedtr" ).next().addClass( "selectedtr" );
             slcttr.removeClass("selectedtr");
          }
});

我编码的解决方案谢谢你upvoted

如何通过箭头按键

1 个答案: