主页 / 问题 / 1055542
Accepted
DamirFelix
Asked:2020-12-07 19:54:23 +0000 UTC2020-12-07 19:54:23 +0000 UTC

如何在模态窗口的表格中填充 TD 单元格？

  • 772

有一张数据表。双击任何行会打开一个模式窗口，在该窗口中应该用该行中的数据填充表格。有一个类似的任务，其中有一个脚本用于在模式窗口中从输入表中填充数据。我尝试应用脚本来填充模式窗口中表格的 TD 单元格。用 td 替换输入。没有成功。

//Заполнение таблицы в модальном окне
$(document).ready(function() {

  $(".tckttbl").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]);
    }*/

    // Или так если не динамическая таблица
    $('td[id=decl]').val(col_arr[1]);
    $('td[id=exec]').val(col_arr[2]);
    $('td[id=stag]').val(col_arr[3]);

    $("#idModalView").modal('show');
  });


  function clear_modal() { // Очистка модального окна
    $('td[id=decl]').val("");
    $('td[id=exec]').val("");
    $('td[id=stag]').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>
    <tr class="tckttbl">
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr class="tckttbl">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr class="tckttbl">
      <td>31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </table>
</div>

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

<div class="modal fade" id="idModalView" 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">
        <table class="table table-striped">
          <tbody>
            <tr>
              <td><strong>Один</strong></td>
              <td id=decl></td>
            </tr>
            <tr>
              <td><strong>Два</strong></td>
              <td id=exec></td>
            </tr>
            <tr>
              <td><strong>Три</strong></td>
              <td id=stag></td>
            </tr>
          </tbody>
        </table>
      </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>

javascript

1 个回答

  1. Best Answer

    为了避免不明显，我会动态生成一个文档以便于调试，而不是将脚本加载到生成的标记中。在特定情况下如何实现取决于使用的工具包...

    尝试将 html 代码放在一个 div 中，然后调用$().modal();就可以了。

    <script>
    (function() {
        const {document} = window.open("about:blank","mypopup","width=500,height=300");
        const persons = [{first: "Petr", last: "Tripolsky"}, {first: "Ivan", last: "Strebkov"}];
        document.write(`
            <h2>Some table</h2>
            <table style="width: 100%;">
            <tr>
                <th>First name</th>
                <th>Last name</th>
            </tr>
            ${persons.map((person) => `<tr><td>${person.first}</td><td>${person.last}</td></tr>`).join("")}
            </table>
        `);
    })();
</script>
    • 2

相关问题