このコードを考慮してください:
次のようなテーブルがあります。
<table class="ArrowNav" cellspacing="0" rules="all" border="1" id="GridView1" style="height:302px;width:692px;border-collapse:collapse;">
<tr>
<th class="Id" scope="col">Id</th><th scope="col">"Group</th><th scope="col">Value</th>
</tr><tr>
<td align="center" valign="middle">1</td><td align="center" valign="middle">1</td><td align="center" valign="middle">100</td>
</tr><tr>
<td align="center" valign="middle">2</td><td align="center" valign="middle">1</td><td align="center" valign="middle">120</td>
</tr><tr>
<td align="center" valign="middle">3</td><td align="center" valign="middle">1</td><td align="center" valign="middle">100</td>
</tr><tr>
<td align="center" valign="middle">4</td><td align="center" valign="middle">2</td><td align="center" valign="middle">90</td>
</tr><tr>
<td align="center" valign="middle">5</td><td align="center" valign="middle">2</td><td align="center" valign="middle">105</td>
</tr><tr>
<td align="center" valign="middle">6</td><td align="center" valign="middle">3</td><td align="center" valign="middle">300</td>
</tr><tr>
<td align="center" valign="middle">7</td><td align="center" valign="middle">4</td><td align="center" valign="middle">123</td>
</tr><tr>
<td align="center" valign="middle">8</td><td align="center" valign="middle">4</td><td align="center" valign="middle">110</td>
</tr><tr>
<td align="center" valign="middle">9</td><td align="center" valign="middle">5</td><td align="center" valign="middle">100</td>
</tr><tr>
<td align="center" valign="middle">10</td><td align="center" valign="middle">5</td><td align="center" valign="middle">110</td>
</tr>
</table>
行間を移動するためのスクリプトを作成します。
var SelectedRowIndex;
$(document).ready(function () {
$('.ArrowNav tr').first().css('background-color', 'yellow');
// $('.ArrowNav tr').first().focus();
$('.ArrowNav tr:first').first().trigger('click');
SelectedRow = 0;
function ResetAllRowColor() {
$('.ArrowNav tr').each(function () {
$(this).css('background-color', 'white');
});
}
$('.ArrowNav tr').on('keyup', function (e) {
ResetAllRowColor();
switch (e.keyCode) {
case 40: //Down
SelectedRow++;
$('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
break;
case 38: //Up
SelectedRow--;
$('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
break;
}
});
$('.ArrowNav tr').on('click', function () {
alert('a');
});
});
問題は、テーブルをナビゲートするためのもので、フォーカスを設定する必要があります。フォーカスを設定するためにこのコードを書きます:$('.ArrowNav tr').first().focus();
しかし、うまくいきませんでした。また、このコードを書きます:$('.ArrowNav tr:first').first().trigger('click');
しかし、行のクリックイベントは発生しません。行間を移動するには、矢印キーを購入します。問題はどこだ?
ありがとう