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