Динамическая таблица, добавление строк при нажатии
Вложений: 1
Пытаюсь сделать чтоб с помощью метода 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">×</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> |
Часовой пояс GMT +3, время: 20:38. |