Nitin Kabra Nitin Kabra - 5 months ago 6
HTML Question

html table tr onkeydown not working

I am trying to make a keyboard navigated html table using tr keydown event, issue is keydown event is not getting fired when I press any key on table.

I tried using

onkeydown="method();"


and jquery

$("tr").keydown(function(event){});


but still keydown event is not getting fired.

link(nitinkabra.com/new_table)

below is an example of what i have done yet :


<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 &amp; 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. &amp; 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 &amp; 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>

Answer

You cannot have a keydown event on a TR, because, it is not focussable. Only focussed elements have key* events. So, change your code this way:

<tr tabindex="0">

So that it gets a focus. Now, when you move your focus, by using Tab key or by clicking, all the key* events will be enabled.

Comments