как получить checkbox и вывести на модалку?
Таблица
success: function (data) { for (var i = 0; i < data.length; i++) { var trimName = name.replace(/\s+/g, ''); var tr = $('.active').closest('tr').index(); $('<tr class="shown ' + trimName + '">' + '<td>' + data[i].nameSize + '</td>' + '<td>' + data[i].kitchenSize + '</td>' + '<td><input type="checkbox" class="activated" '+(data[i].defaultSize ? 'checked' : '' )+'></td>' + '<td>' + '<a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" onclick="sendValuesToModal()"></i></a>' + // '<a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true" onclick="deleteValues()"></i></a></td>' + '</tr>').insertAfter($('tr:eq(' + (tr + 1) + ')') ); } }, function sendValuesToModal() { $('a').on('click', function() { var nameSize = $(this).closest('.shown').find('td:eq(0)').text(); var kitchenSize = $(this).closest('.shown').find('td:eq(1)').text(); var defaultSize = $(this).closest('.shown').find('td:eq(2)'); // тут не получается alert(defaultSize); $('#editValues').modal('show'); $("input[name=nameSize]").val(nameSize); $("input[name=kitchenSize]").val(kitchenSize); $("input[name=defaultSize]").val(defaultSize); // и тут тоже }); } <div class="container-fluid"> <div class="row"> <table class="table table-hover table-responsive"> <thead> <tr class=".info"> <th>Название</th> <th>Название для кухни</th> <th>По умолчанию</th> </tr> </thead> <tbody id="records_table"> <tr th:each ="scale : ${scale}" > <td th:inline="text" class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i> [[${scale.nameScale}]] </td> <td> <!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a> <a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>--> </td> <td></td> <td> <button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button> </td> </tr> </tbody> </table> </div> </div> <!--Modal window update Values--> <div id="editValues" class="modal fade" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Редактировать значения шкалы размеров</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <div class="form-group"> <label for="nameSize">Введите название размера:</label> <input class="form-control" type="text" id="editNameSize" required="required" name="nameSize"> </div> <div class="form-group"> <label for="kitchenSize">Введите название для кухни:</label> <input class="form-control" type="text" id="editKitchenSize" required="required" name="kitchenSize"> </div> <div class="form-group"> <label for="defaultSize">Установить шкалу по умолчанию:</label> <input class="form-control" type="checkbox" id="editDefaultSize" required="required" name="defaultSize"> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success" onclick="editValues()">Сохранить</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> |
Нужно показывать html код. А вот в JS не зачем терзать DOM по много раз:
var el = $(this).closest('.shown').find('td'), //а затем уже из это коллекции брать необходимое nameSize = el.eq(0).text(), kitchenSize = ..... |
Добавил html
|
$(this).closest('.shown').find('td:eq(0)') - ищутся ячейки таблицы (а что в таблице одна строка?), и далее какая-то проблема, а где код таблицы?
Если получить чекбокс, это его значение и который в третей ячейке, то el.eq(2).find('input').val(), или подобное. |
Обновил! Таблица формируется динамически (вы мне помогали в другой теме тоже по причине чекбокса :) )
https://javascript.ru/forum/jquery/7...server-bd.html 3-е значение в таблице это checkbox тип boolean и я хочу при вызове модалки увидеть что галочка стоит или нет (в зависимости true or false) |
Цитата:
Если таблица, то сколько в ней строк, ячеек и флажков? Правильно, много. А какие вы получаете, или же ссылка в каждой строке, а класс "shown", это TR? Тогда все верно, и как показано. Иначе то возвращаться будет только из первой строки таблицы. |
<table class="table table-hover table-responsive"> <thead> <tr class=".info"> <th>Название</th> <th>Название для кухни</th> <th>По умолчанию</th> </tr> </thead> <tbody id="records_table"> <tr> <td class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i> Обьем бутылок </td> <td> <!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a> <a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>--> </td> <td></td> <td> <button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button> </td> </tr> <tr> <td class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i> Размер пиццы </td> <td> <!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a> <a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>--> </td> <td></td> <td> <button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button> </td> </tr> <tr class="opened"> <td class="selectView active"><i class="fa fa-angle-right fal fa-angle-down" aria-hidden="true"></i> Вес товара </td> <td> <!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a> <a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>--> </td> <td></td> <td> <button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button> </td> </tr><tr class="shown Вестовара item-active"><td>100 грамм</td><td>100 гр.</td><td><input type="checkbox" class="activated"></td><td><a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" onclick="sendValuesToModal()"></i></a></td></tr> </tbody> </table> |
Сделал так
var defaultSize = el.eq(2).find('input').val(); возвращает не true/false в "on" |
class="shown Вестовара item-active" - это что за кошмар?
<a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" onclick="sendValuesToModal()"> Тогда что это такое: function sendValuesToModal() { $('a').on('click', function() { И где в таблице флажки? |
тут коряво написано но если я уберу trimName то таблица не будет сворачиваться в виде выпадающего списка а будет копировать кучу строк вниз
$('<tr class="shown ' + trimName + '">' + class="shown Вестовара item-active" - это что за кошмар? Это кнопка редактировать строчку, которая перенаправляет в функцию в которой мы собираем из строчки 2 - String 1- boolean <a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" [color="red"]onclick="sendValuesToModal()" Тогда что это такое: удалил function sendValuesToModal() { $('a').on('click', function() { И где в таблице флажки? вот один флажок data[i].defaultSize <td>' + data[i].nameSize + '</td>' + '<td>' + data[i].kitchenSize + '</td>' + '<td><input type="checkbox" class="activated" '+(data[i].defaultSize ? 'checked' : '' )+'></td>' + Одним словом var el = $(this).closest('.shown').find('td'); var nameSize = el.eq(0).text(); var kitchenSize = el.eq(1).text(); var defaultSize = el.eq(2).text(); //здесь .text(); не уместен т.к это checkbox Как правильно его получить? |
Часовой пояс GMT +3, время: 11:11. |