Question

在页面上，我从一个数组中形成一个表。通过双击该表的行，将出现带有输入的模态窗口，其中有关于该相同行的信息以进行编辑。我不知道如何将这些信息添加到模态窗口。

table = document.createElement('table');
table.style.border = '1px solid black';
table.style.borderRadius = '5px';
table.style.margin = '0 auto';
for (i = 0; i < info.length; i++) {
     row = document.createElement('tr');
     row.className = 'dbl';
     row.id = i;
     for (j = 0; j < info[i].length; j++) {
        cell = document.createElement('td');
        cell.appendChild(document.createTextNode(info[i][j]));
        cell.style.borderBottom = '1px solid #ddd';
        cell.style.padding = '4px';
        cell.style.width = '130px';
        row.appendChild(cell);
     }
  table.appendChild(row);
  }
  document.body.appendChild(table);

 for (i=1;i < info.length; i++) {
      document.getElementById("" + i).addEventListener("dblclick", zxc);

     function zxc() {
          var modal = document.getElementById('myModal');
          var span = document.getElementsByClassName("close")[0];
          modal.style.display = "block";
          span.onclick = function () {
               modal.style.display = "none";
          }
          window.onclick = function (event) {
          if (event.target == modal) {
                modal.style.display = "none";
          }
      }
     document.getElementById('client').value = info[i][0];
     document.getElementById('date').value = info[i][1];
     document.getElementById('sum').value = info[i][2];
     document.getElementById('val').value = info[i][3];
    }
    }

html代码

   <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close"><button>&times;</button></span>
            <form method="post">
                <p>Заемщик: <input type="text" id="client" name="client" value=""></p>
                <p>Дата выдачи: <input type="text" id="date" name="date" value=""></p>
                <p>Сумма кредита: <input type="text" id="sum" name="sum" value=""></p>
                <p>Валюта кредита: <input type="text" id="val" name="val" value=""></p>
                <button>Сохранить</button>
            </form>
        </div>
    </div>

Answer 1

创建一个函数（functionName（））用于动态创建模态视图或使隐藏为true的任何静态html代码。

现在在前面创建的tr元素中调用此函数： -

 row.setAttribute("ondblclick","functionName()");

现在通过参考以下链接在模态div中创建输入字段： - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom

将信息添加到模态窗口

1 个答案: