我正在尝试使用tr keydown事件制作键盘导航的html表，问题是当我按下桌子上的任何键时keydown事件没有被触发。
我尝试使用
onkeydown="method();"
和jquery
$("tr").keydown(function(event){});
但是keydown事件仍然没有被解雇。
链路（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>
答案 0 :(得分：29)
keydown上不能发生TR事件，因为它不可聚焦。只有焦点元素才有key*个事件。所以，用这种方式改变你的代码：
<tr tabindex="0">
因此它成为焦点。现在，当您移动焦点时，使用 Tab 键或单击，将启用所有key*事件。
答案 1 :(得分：1)
就我而言，我创建了一个输入元素，并使其像css一样从屏幕上消失，如
<input type="text" id="tableEventShifter" style="position:absolute;z-index: -10;">
将click事件添加到表及其处理程序中，将焦点事件触发到输入元素
$("#myTable").on("click",function(e){
$("#tableEventShifter").focus();
});
最后，在输入元素
上绑定事件处理程序$("#tableEventShifter").on("keydown", function(e) {
var keyCode = (e.keyCode ? e.keyCode : e.which);
alert(keyCode);
});