-2
私はこのクラスをkeypressの矢印のように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>
であり、これはこれまでのところ、あなたがtdをクリックしたとき、それは最も近いtrを見つけて、バックグラウンドでそれにクラスを追加します私のjavascriptのです。
$(document).on('click','.ConfigPatternTable tr',function(){
$(".ConfigPatternTable").find("tbody > tr").removeClass("selectedtr");
$(this).closest('tr').addClass("selectedtr");
});
もこの私が
$(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
そして、私は質問の要件
に達し、このコードスニペットを期待しているれる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")
}
});
});
$(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>