All geek questions in one place

Html table tr onkeydown not working

I am trying to make an html navigation table with a keyboard using the tr keydown event, the problem is that the keydown event does not fire when I press any key on the table.

I tried to use

onkeydown="method();"

and jquery

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

but still the keydown event does not fire.

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, MGROAD, 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>
+4
source share
1 answer

You cannot have a keydown event on TR because it cannot be focused. Only lumped elements have key* events. So change your code like this:

 <tr tabindex="0">

So that becomes a trick. Now, when you move focus using the Tab key or pressing, all key* events will be included.

+23
source

Source: https://habr.com/ru/post/1484799/

More articles:


All Articles