モーダルウィンドウへの情報の追加

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を（））を作成するか、真の隠されたとの任意の静的HTMLコードを作ります。今すぐ下のリンクを参照のうえでモーダルDIVに入力フィールドを作る

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

： - - ： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom

さて、次により以前に作成されたTR要素で、この関数を呼び出します