0

I am using jquery datatable in one of my projects which have two columns (Qty, Rate) containing input fields in each row. When cursor focus to first column(Qty) input field in first row and press enter, it successfully focus to the next input field in the same first row. But when I select an input field in the second or third row in Qty column and press enter, it again focus to the first row in Rate column.

What I required is to focus to the very next input field in the same current row. Any help would be greatly appreciated.

Please have a look on my uploaded video to understand better.

sample video

 $(document).ready(function () {
    $('#save-stage').DataTable({
        "tabIndex": 1,
        keys: true,
        "destroy": "true",
        "bSort": false,
        "scrollY": "300px",
        "scrollX": false,
        "scrollCollapse": true,
        paging: false,
        searching: false,
        info: false
    });
});

$('#save-stage').on('keydown', function (ev) {
    $(this).find("td:eq(5) input[type='text']").focus();
});
Rauf Abid
  • 346
  • 1
  • 8
  • 17
  • I think your `keydown` handler should be on each "Qty" `` field (not on `#save-stage`), and your code to focus on the next input field should be `$(this).next('input').focus()`. – kmoser Feb 23 '22 at 21:25
  • I think in that case I have to give each input an I'd to achieve this case as you suggested which I don't want, actually rows will insert dynamically to datatable and I need a natural behaviour of datatable to focusing each input on keypess event instead of giving id to each input, thanks – Rauf Abid Feb 24 '22 at 02:18
  • In that case you would want to use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) rather than handlers for each input field. – kmoser Feb 24 '22 at 04:56
  • Sorry for late reply, how about assigning each input an I'd whats ur suggestion?(even I don't feel this is good way), secondly can we convert or use tab key into keypress event, this way can also resolve what I need, thanks – Rauf Abid Feb 26 '22 at 07:01
  • As I said, event delegation is the better way to go, because it doesn't require you to add IDs to each element. Also, you haven't made it clear *when* you want to switch to the next input. On kepress? On tab? Please [edit your question](https://stackoverflow.com/posts/71242141/edit) to make that more clear. – kmoser Feb 26 '22 at 15:42

0 Answers0