Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

Доброго вечера. Подскажите, как можно реализовать переход на следующий елемент 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 может быть несколько. Подскажите решение :???:

Ссылка на комментарий
Поделиться на других сайтах

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

 

 

код таба 09

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

tabindex

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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

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

Скрытый текст
$(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;
                 }
            });
        }
    });

 

 

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.