Menu
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">
[email protected]
</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>
246
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.
107
In my case, I created an input element and made it to disappear from screen with css like
<input type="text" id="tableEventShifter" style="position:absolute;z-index: -10;">
And add click event to table and at it's handler, trigger focus event to input element as
$("#myTable").on("click",function(e){
$("#tableEventShifter").focus();
});
Finally, bind event handler on input element
$("#tableEventShifter").on("keydown", function(e) {
var keyCode = (e.keyCode ? e.keyCode : e.which);
alert(keyCode);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
