Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2018, 09:30
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Динамическая таблица, добавление строк при нажатии
Пытаюсь сделать чтоб с помощью метода insertAfter появлялся tr с именем

function openModifiers() {

    $('.selectView').click(function () {
        var nameNotTrimmed = $(this).text();
        var name = $.trim(nameNotTrimmed);

        if ($(this).closest('tr').hasClass('opened')) {

            var trimName = name.replace(/\s+/g, '');
            $('.' + trimName + '').closest('tr').each(function () {
                $(this).remove();
            });
            $(this).closest('tr').find('i').removeClass('fal fa-angle-down').addClass('fal fa-angle-right');
            $(this).closest('tr').removeClass('opened');
            return;
        }

        $('tr .active').removeClass('active');
      $(this).addClass('active').siblings().removeClass('active'); //.siblings() поиск соседних элементов для выбраных элементов
        $(this).closest('tr').addClass('opened');
        $(this).closest('tr').find('i').removeClass('fal fa-angle-right').addClass('fal fa-angle-down');

        $.ajax({
            type: "POST",
            url: "getModifiers",
            data: {name: name},
            beforeSend: function (xhr) {
                xhr.setRequestHeader(csrfHeader, csrfToken);
            },
            success: function (data) {

                for (var i = 0; i < data.length; i++) {

                    var trimName = name.replace(/\s+/g, '');
                    var tr = $('.active').closest('tr').index();

                          console.log(data[i].name);

                        $('<tr class="shown ' + trimName + '">' +
                            '<td>' + data[i].name + '</td>' +
                            '</tr>').insertAfter($('tr:eq(' + (tr + 1) + ')')
                        );
                }
            },
            error: function (e) {
                //alert("Ошибка в значении Шкалы размеров")
                console.log("Ошибка в значении Шкалы размеров");
            }
        });
    });


}



<!----------------------------------------------------------------------------------------------- Modal Modifiers-->
    <div class="modal fade" id="addModifier" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Добавьте модификатор</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="custom-control custom-checkbox mx-2">
                        <input type="checkbox" class="custom-control-input" id="groupModifier">
                        <label class="custom-control-label" for="groupModifier">Добавить групповой модификатор</label>

                    </div>

                    <div class="custom-control custom-checkbox mx-2">
                        <input type="checkbox" class="custom-control-input" id="showDishes">
                        <label class="custom-control-label" for="showDishes">Показать блюда</label>
                    </div>

                    <table class="table table-bordered" id="tableModifiers">
                        <thead>
                        <tr>
                            <th>Название</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="modifierNomenclature : ${modifierNomenclatures}">
                            <td  th:inline="text" class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i>
                                [[${modifierNomenclature.name}]]
                            </td>
                           <!-- <td th:text="${modifierNomenclature.name}"><i class="fa fa-angle-right" aria-hidden="true"></i></td>-->
                            <input type="hidden" th:value="${modifierNomenclature.id}">
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                    <button type="button" class="btn btn-primary" onclick="saveModifiers()" data-dismiss="modal">
                        Сохранить
                    </button>
                </div>
            </div>
        </div>
    </div>
Изображения:
Тип файла: jpg топинги.JPG (16.2 Кб, 3 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии enter срабатывал :active Иван8718284019284759670 Элементы интерфейса 1 25.08.2017 03:08
Замена цвета в body при нажатии div id 3uk Элементы интерфейса 2 20.08.2017 11:27
Смена картинок при нажатии Antonjrjr Элементы интерфейса 0 29.05.2017 11:57
Добавлять и удалять Select при нажатии на кнопки jestify Общие вопросы Javascript 4 19.09.2016 09:42
SyntaxHighlighter подсветка при нажатии faraday Общие вопросы Javascript 3 31.03.2012 23:43