如何通過箭頭的按鍵給同級同胞元素

-2

我正在尋找移動這個類的同胞按按鍵箭頭的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

而與此代碼片段希望我到了問題的要求

$(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(){ 
 
\t $(".ConfigPatternTable").find("tbody > tr").removeClass("selectedtr"); 
 
\t $(this).closest('tr').addClass("selectedtr"); \t 
 
});

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

<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>

來源

2017-08-25 Munkhdelger Tumenbayar

$(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

來源

2017-08-29 01:45:57

如何通過箭頭的按鍵給同級同胞元素

回答

相關問題