Question 176457 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can’t focus next input in same row w/ jQuery?

I have an HTML table and trying to focus the next input field in the same row. But when i press enter it focus to the next input but to the first row.

In the screenshot below my cursor is in qty column in the second row, when i press enter it focus to the red highlighted field, rather to focus green highlighted field.

enter image description here

I am using the following code. Appreciated if anyone could help me out.

$('#save-stage').on('keypress', function (event) {
        debugger
        var keycode = (event.keyCode ? event.which : '');
        if (keycode == '13') {

            var columnIndex = $(event.target).closest('td').index();
            var headerName = $('#save-stage th').eq(columnIndex).text();
            if (headerName == "Qty") {
                $("#save-stage").find("td:eq(5) input[type='text']").focus();
            }

            return false;

        }
    });
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got solution to my problem. I am focusing to the required TD to the specific row index getting dynamically. I would like to express my gratitude to all those who provided their inputs.

    $('#save-stage').on('keypress', function (event) {

            debugger
            var keycode = (event.keyCode ? event.which : '');
            if (keycode == '13') {

                var columnIndex = $(event.target).closest('td').index();
                var rowIndex = $(event.target).closest('tr').index();
                var headerName = $('#save-stage th').eq(columnIndex).text();
                if (headerName == "Qty") {

                    $("#save-stage > tbody > tr").eq(rowIndex).find("td:eq(5) input[type='text']").focus();
                    $("#save-stage > tbody > tr").eq(rowIndex).find("td:eq(5) input[type='text']").select();
                }

                if (headerName == "Rate") {
                    $("#txtProductName").focus();
                }

                if (headerName == "Disc %") {
                    $("#txtProductName").focus();
                }

                return false;
            }
        });

  2. 0

    In your code, reference to the TR is missing and seems the #save-stage is referenced to the table (not TR) so you always end up to the first row using eq(). I modified the code by referencing to the current TR (using $(this)) also used class instead of ID to work with multiple rows:

    $('.save-stage').on('keypress', function (event) {
        debugger
        var keycode = (event.keyCode ? event.which : '');
        if (keycode == '13') {

            var columnIndex = $(event.target).closest('td').index();
            var headerName = $("#th").find("td").eq(columnIndex).text();
            
            if (headerName == "Qty") {
                $(this).find("td").eq(4).find("input").focus();
            }

            return false;

        }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<table border="1">
    <thead id="th">
        <td>NAME</td>
        <td>ITEMS</td>
        <td>RACK</td>
        <td id="test">Qty</td>
        <td>RATE</td>
        <td>DISC</td>
        <td>TOTAL</td>
    </thead>
    <tr class="save-stage">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><input></td>
        <td><input></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
 
    </tr>
    <tr class="save-stage"">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><input></td>
        <td><input></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search