0

Верстка на Bootstrap. Есть модальное окно, оно вызывается путем двойного клика на строку таблицы. Нужно чтобы данные из строки из которой вызвано модальное окно отображались в этом модальном окне. Вызов модального окна выглядит на данный момент выглядит так:

<script>
$(document).ready(function(){
    $(".usrtbl").dblclick(function(){
        $("#idModalEditUser").modal('show');
    });
});
</script>

Сейчас при нажатии на любую строку таблицы выводится модальное окно с пустой формой.

$(document).ready(function() {
  $(".usrtbl").dblclick(function() {
    $("#idModalEditUser").modal('show');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div>
  <table>
    <tr class="usrtbl" id="1">
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr class="usrtbl" id="2">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="usrtbl" id="3">
      <td>31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </table>
</div>

<!--Модальное окно-->

<div class="modal fade" id="idModalEditUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

3
  • разметку покажите, а лучше сделайте в сниппете воспроизводимый пример 26 ноя 2019 в 7:44
  • берите closest('tr'), извлекайте данные из ячеек, и прописывайте в контролы модалки, либо если клик по строке, то не надо closest
    – teran
    26 ноя 2019 в 7:46
  • @humster_spb добавил сниппет
    – DamirFelix
    26 ноя 2019 в 8:13

3 ответа 3

1

UPD
Тогда получаете по отдельности значения ячеек в строке и в каждый инпут заносите это значение:

$(document).ready(function() {
  $(".usrtbl").dblclick(function(){
    let one = $(this).children('td:first-child').text();
    let two = $(this).children('td:nth-child(2)').text();
    let three = $(this).children('td:last-child').text();
    $('#one').val(one);
    $('#two').val(two);
    $('#three').val(three);
    $("#idModalEditUser").modal('show');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div>
  <table>
    <tr class="usrtbl" id="1">
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr class="usrtbl" id="2">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="usrtbl" id="3">
      <td>31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </table>
</div>

<!--Модальное окно-->

<div class="modal fade" id="idModalEditUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-row">
            <div class="form-group">
              <label for="one">Один</label>
              <input type="text" name="one" class="form-control" id="one">
            </div>
            <div class="form-group">
              <label for="two">Два</label>
              <input type="text" name="two" class="form-control" id="two">
            </div>
            <div class="form-group">
              <label for="three">Три</label>
              <input type="text" name="three" class="form-control" id="three">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


Просто передавайте в модальное окно $(this).text()

$(document).ready(function() {
  $(".usrtbl").dblclick(function() {
    $("#idModalEditUser").modal('show');
    $("#idModalEditUser .modal-body").text($(this).text());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div>
  <table>
    <tr class="usrtbl" id="1">
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr class="usrtbl" id="2">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="usrtbl" id="3">
      <td>31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </table>
</div>

<!--Модальное окно-->

<div class="modal fade" id="idModalEditUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

4
  • А если вот так? Просто у меня в модальном окне находится форма и она должна заполниться соответствующими данными из ячеек строки таблицы. Грубо говоря, из первой ячейки в input - Один, из второй в input - Два и т.д. jsfiddle.net/myzu3kh7/2
    – DamirFelix
    26 ноя 2019 в 10:04
  • @DamirFelix, я обновил ответ 26 ноя 2019 в 10:17
  • А что означают td:first-child и т.д.? Если у меня например больше ячеек, чем 3.
    – DamirFelix
    26 ноя 2019 в 13:11
  • @DamirFelix, это селекторы дочерних элементов - чтобы не присваивать каждому какой-то свой класс или id, можно обращаться td:nth-child(1), td:nth-child(2) и т.д. в зависимости от того, сколько у Вас ячеек 26 ноя 2019 в 13:32
1

Надеюсь все понятно расписал, если у вас динамическая таблица пользуйтесь циклами, так же можно и модальное окно изменять на основе количества данных.

$(document).ready(function() {

  $(".usrtbl").dblclick(function() {
    clear_modal(); //Очистка можно так же циклом, принцип показал ниже
    var col_arr = []; //Иницализация масива
    var rowData = $(this).children(); //Получаем кучу <td> из тега <tr>
    
    for(var i = 0; i < $(this).children().length;i++){
      //Засовываем значения в масив для более удобной работы с ними
      col_arr.push($(rowData[i]).text()); 
    }
    
    console.log(col_arr); //Выводит значения стобцов
    
    for(var i = 0; i <= col_arr.length; i++){
      //Вместо имени можешь использовать data тэг и радоваться жизни
      $('input[name=col_'+(Number(i)+1)+']').val(col_arr[i]);
    }
    
    /* // Или так если не динамическая таблица
    $('input[name=col_1]').val(col_arr[0]);
    $('input[name=col_2]').val(col_arr[1]);
    $('input[name=col_3]').val(col_arr[2]);
    */
    $("#idModalEditUser").modal('show');
  });
  
  
  function clear_modal() { // Очистка модального окна
    $('input[name=col_1]').val("");
    $('input[name=col_2]').val("");
    $('input[name=col_3]').val("");
  }
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div>
  <table id="MyTable">
    <tr class="usrtbl" id="1">
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr class="usrtbl" id="2">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="usrtbl" id="3">
      <td>31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </table>
</div>

<!--Модальное окно-->

<div class="modal fade" id="idModalEditUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <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="form-group row">
            <label for="" class="col-form-label col-sm-3 col-form-label-sm">Значение 1:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control form-control-sm" name="col_1">
            </div>
          </div>
          <div class="form-group row">
            <label for="" class="col-form-label col-sm-3 col-form-label-sm">Значение 2:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control form-control-sm" name="col_2">
            </div>
          </div>
          <div class="form-group row">
            <label for="" class="col-form-label col-sm-3 col-form-label-sm">Значение 3:</label>
            <div class="col-sm-9">
              <input type="text" class="form-control form-control-sm" name="col_3">
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Сохранить</button>
      </div>
    </div>
  </div>
</div>

2
  • А как заполнить таблицу в модальном окне, т.е. если вместо инпутов, тег td?
    – DamirFelix
    6 дек 2019 в 16:17
  • @DamirFelix так же, заместо $('input[name=col_1]').val(""); пишешь $('td[name=col_1]').val(""); или что-то такое, смотря по какому тэгу хочешь 9 дек 2019 в 5:53
0

Данные из строки отображаются в модальном окне по двойному клику:

$(document).ready(function() {
  const $modal = $("#idModalEditUser");
  const $modalBody = $modal.find('.modal-body');
  $(".usrtbl").dblclick(function(e) {
    $modalBody.text(null);
    [...this.children].map((item, index)=> {
      $modalBody.append(` (${index} элемент: ${item.innerText})`);
    });
    $modal.modal('show');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<div>
  <table>
    <tr class="usrtbl" id="1">
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr class="usrtbl" id="2">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="usrtbl" id="3">
      <td>31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </table>
</div>

<!--Модальное окно-->

<div class="modal fade" id="idModalEditUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.