0

I have an HTML table like this:

<table id="order-table">
    <tr class="row-header">
        <td style="width: 40px; text-align: center; size: 8pt;">Delete<input tabindex="-1" id="checkbox-delete-all" type="checkbox"></td>
        <td style="width: 70px;">Line</td>
        <td style="width: 140px;">Product ID</td>
        <td style="width: 70px;">Order Qty</td>
        <td style="width: 140px;">Description</td>
        <td style="width: 140px;">ABC8</td>
        <td style="width: 140px;">UPC</td>
        <td style="width: 140px;">NDC</td>
    </tr>
    <tr class="row">
        <td style="text-align: center;"><input tabindex="-1" class="checkbox-delete-row" type="checkbox"></td>
        <td class="row-target" style="width: 70px;">10</td>
        <td style="width: 140px;"><input class="id-target" name="original-input[1]" style="width: 140px;" type="text" /></td>
        <td style="width: 70px;"><input class="qty-target" name="qty[1]" style="width: 70px;" type="text" value="1" /></td>
        <td style="width: 140px;"></td>
        <td style="width: 140px;"><input readonly tabindex="-1" class="abc8-target" name="abc8[1]" style="width: 140px; border: 0; background: transparent" type="text" value="12345678" /></td>
        <td style="width: 140px;"></td>
        <td style="width: 140px;"></td>
    </tr>
</table>

I have a JavaScript/jQuery function like this:

$("#dialog-create-order").on("keydown", function(event) {
        if (event.which === 13) {
            $(this).parents("td").next("td").find("input").focus();
            event.preventDefault();
        }
});

The table may have n additional rows made up of the <tr class="row"> code.

When enter is pressed I want the cursor to go to the next input box (on current row and then on next row) but currently it is not. I'm using jQuery 1.10.2. What am I doing wrong?

Fiddle: http://jsfiddle.net/5rMhm/

4

1 回答 1

1

给你菲利普-希望这有帮助

$("input[type=text]").on("keydown", function(event) {
    if (event.which === 13) {
        console.log("Enter pressed");
        var nextOnRow = $(this).parent().next("td").find("input[type=text]");
        if(nextOnRow.length != 0) {
            nextOnRow.focus();
        } else {
            var nextRowInputs = $(this).parent().parent().next("tr").find("input[type=text]");
            if(nextRowInputs.length > 0) {
                nextRowInputs[0].focus();
            }
        }
        event.preventDefault();
    }
});

这是 JFiddle：http: //jsfiddle.net/5rMhm/29/

于 2013-11-13T17:47:42.220 回答