.focus() на следующей ячейки, при наличии в ней элемента input

[mario512]

Доброго вечера. Подскажите, как можно реализовать переход на следующий елемент input в таблице html и фокусировка на нем, при условии, что следующие ячейки могут его не содержать. 

Таблица:

Скрытый текст

<table class="table table-bordered table-sm" id="dataTable" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Код</th>
                                        <th>Артикул</th>
                                        <th>Наименование</th>
                                        <th>Цена</th>
                                        <th>Количество</th>
                                        <th>Сумма</th>

                                    </tr>
                                </thead>

                                <tbody>
                                    <tr>
                                        <td name="id">
                                        <div class="ui-widget">
                                                
                                            </div>
                                        </td>
                                        <td name="article">
                                            <div class="ui-widget">
                                                <input class="form-control form-control-sm" id="article">
                                            </div>
                                        </td>
                                        <td name="name">
                                        <div class="ui-widget">
                                                
                                                </div>
                                        </td>
                                        <td name="price">
                                            <div class="ui-widget">
                                                <input class="form-control form-control-sm" id="price">
                                            </div>
                                        </td>
                                        <td name="count">
                                        <div class="ui-widget">
                                                <input class="form-control form-control-sm" id="count">
                                            </div>
                                        </td>
                                        <td name="total">
                                            <div class="ui-widget">
                                                <input class="form-control form-control-sm" id="total">
                                            </div>
                                        </td>
                                        </td>

                                    </tr>

                                </tbody>
                            </table>

 

 

Что-то вроде этого, но что бы работало)))

Скрытый текст

 $(document).on('keyup touchstart', '#dataTable', function(e) {
              
        if (event.keyCode == 13) {
            _this = $(e.target).parents('td');
            if ($(_this).next().find('div > input').length > 0) {
                $(_this).next().find('div > input').focus();
            }
                    
                    
            }
    });

 

ячеек без input может быть несколько. Подскажите решение 

[chukcha]

 

 

код таба 09

[mario512]

06.02.2023 в 21:48, chukcha сказал:

 

 

код таба 09

Очень интересно, но ничего не понятно 

Есть мысль в цикле переберать ячейки, пропуская те, которые не содержат input. Но я думаю что это не очень гуд. Как перешагивать пустые, и фокусироваться на содержащих поля ввода?

[sv2109]

если нужно взять какой-то элемент у которого есть потомок с каким-то свойством то есть метод .has() в jquery или на чистом css тоже есть псевдоклас :has() уже поддерживается почити всеми современными браузерами. 

[mario512]

07.02.2023 в 11:42, sv2109 сказал:

если нужно взять какой-то элемент у которого есть потомок с каким-то свойством то есть метод .has() в jquery или на чистом css тоже есть псевдоклас :has() уже поддерживается почити всеми современными браузерами. 

Да. .has() работает. Но проблемма в том, что я не могу сообразить, как перешагнуть те ячейки, в которых отсутствует input. Если я стою на input и по нажатию enter хочу перейти на следующую, содержащую поле ввода. Мне надо пропустить неизвестное колличество ячеек.   

[chukcha]

tabindex

и по enter - менять фокус на следующий

[mario512]

Решил задачу таким образом:

Скрытый текст

$(document).on('keyup touchstart', '#dataTable', function(e) {
        if (event.keyCode == 13) {
            _this = $(this).find('td').slice($(e.target).parents('td').index()+1);
            _this.each(function (i, e) { 
                 if ($(e).has('input').length > 0) {
                    $(e).find('div > input').focus();
                    return false;
                 }
            });
        }
    });