tr keydown イベントを使用してキーボードでナビゲートする html テーブルを作成しようとしています。問題は、テーブルの任意のキーを押しても keydown イベントが発生しないことです。
使ってみた
onkeydown="method();"
とjquery
$("tr").keydown(function(event){});
それでもキーダウンイベントは発生しません。
リンク(nitinkabra.com/new_table)
以下は、私がまだ行ったことの例です:
<head>
<script>
function keydwn() {
alert("herte");
}
</script>
<style>
.selected:focus{background-color:green}
.selected:hover{background-color:#fdfd02}
</style>
</head>
<body>
<div style="width:750px;max-width: 3200px;max-height:450px;overflow-y:hidden;overflow-x:scroll;">
<div style="width:750px;max-width: 3200px;">
<table class='default_table' style="table-layout: fixed; width: .3200px; overflow: visible;">
<thead>
<tr>
<th style="width: 300px">
Ledger Name
</th>
<th style="width: 150px">
Group
</th>
<th style="width: 300px">
Address 1
</th>
<th style="width: 300px">
Address 2
</th>
<th style="width: 120px">
Contact Person
</th>
<th style="width: 120px">
City
</th>
<th style="width: 120px">
State
</th>
<th style="width: 120px">
PIN
</th>
<th style="width: 150px">
Phone
</th>
<th style="width: 150px">
Mobile
</th>
<th style="width: 200px">
E-Mail
</th>
<th style="width: 120px">
TIN
</th>
<th style="width: 120px">
Area
</th>
<th style="width: 120px">
Remarks
</th>
<th style="width: 100px">
Opening
</th>
<th style="width: 120px">
Lock Credit Bill
</th>
<th style="width: 120px">
Limit on Amount
</th>
<th style="width: 100px">
Limit on Bill
</th>
<th style="width: 120px">
Limit Credit Days
</th>
</tr>
</thead>
</table>
</div>
<div style="width: 3405px;overflow-y:scroll;overflow-x:hidden; max-height:430px;">
<table id = "main_table" class='default_table' style="table-layout: fixed; width:100%;margin-top:-30px;">
<thead>
<tr>
<th style="width: 300px">
Ledger Name
</th>
<th style="width: 150px">
Group
</th>
<th style="width: 300px">
Address 1
</th>
<th style="width: 300px">
Address 2
</th>
<th style="width: 120px">
Contact Person
</th>
<th style="width: 120px">
City
</th>
<th style="width: 120px">
State
</th>
<th style="width: 120px">
PIN
</th>
<th style="width: 150px">
Phone
</th>
<th style="width: 150px">
Mobile
</th>
<th style="width: 200px">
E-Mail
</th>
<th style="width: 120px">
TIN
</th>
<th style="width: 120px">
Area
</th>
<th style="width: 120px">
Remarks
</th>
<th style="width: 100px">
Opening
</th>
<th style="width: 120px">
Lock Credit Bill
</th>
<th style="width: 120px">
Limit on Amount
</th>
<th style="width: 100px">
Limit on Bill
</th>
<th style="width: 120px">
Limit Credit Days
</th>
</tr>
</thead>
<tbody>
<tr id="0" class="selected" onkeydown="keydwn();">
<td style="width: 300px">
ABC India Pvt. Ltd.
</td>
<td style="width: 150px">
</td>
<td style="width: 300px">
ABC Add 1, Chennai
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
Chennai
</td>
<td style="width: 120px">
Chennai
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
abc@yahoo.com
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
5000.00
</td>
<td style="width: 120px">
1
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="1" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Abhilash Loan Ac
</td>
<td style="width: 150px">
Unsecured Loans
</td>
<td style="width: 300px">
215, M.G.ROAD, BANGA
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="2" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Abxd India Pvt Ltd
</td>
<td style="width: 150px">
Sundry Debtors
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="3" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Building
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="4" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Computer & Per.
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="5" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Furn. & Fixt.
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="6" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on Motor Car
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
<tr id="7" class="selected" onkeydown="keydwn(event);">
<td style="width: 300px">
Accum. Dep. on P & M - I
</td>
<td style="width: 150px">
Fixed Assets
</td>
<td style="width: 300px">
</td>
<td style="width: 300px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 150px">
</td>
<td style="width: 150px">
</td>
<td style="width: 200px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
0.00
</td>
<td style="width: 120px">
</td>
<td style="width: 120px">
</td>
<td style="width: 100px">
</td>
<td style="width: 120px">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
document.getElementById('0').focus();
</script>
</body>
</html>