12

我正在尝试使用 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 &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

2 回答 2

37

你不能在 akeydown上有一个事件TR，因为它是不可聚焦的。只有聚焦的元素才有key*事件。因此，以这种方式更改您的代码：

<tr tabindex="0">

让它成为焦点。现在，当您通过使用Tab键或单击移动焦点时，所有key*事件都将启用。

于 2013-06-06T10:02:44.930 回答
1

就我而言，我创建了一个输入元素，并使用 css 使其从屏幕上消失

<input type="text" id="tableEventShifter" style="position:absolute;z-index: -10;">

并将点击事件添加到表格并在其处理程序中，触发焦点事件以输入元素为

$("#myTable").on("click",function(e){
  $("#tableEventShifter").focus();
});

最后，在输入元素上绑定事件处理程序

$("#tableEventShifter").on("keydown", function(e) {
    var keyCode = (e.keyCode ? e.keyCode : e.which);
    alert(keyCode);
});
于 2018-05-02T10:50:47.203 回答