Добавление информации в модальное окно

272

20 ноября 2017, 19:22

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

var table, row, cell, i, j; 
var info = [["Заемщик", "Дата выдачи", "Сумма кредита", "Валюта"], 
["Иван", "10.05.2016", "10000", "$"], 
["Пётр", "15.03.2012", "50000", "$"], 
["Владимир", "18.11.2017", "5000", "р"]]; 
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]; 
} 
}

<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

Callback функция напрямую не видит параметры из вне функции.

Вот как изменил код.

Во первых функцию обработчик надо написать вне цикла. А то сколько у вас будет функций столько и будет обработчик. а так он единый.

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

var table, row, cell, i, j; 
var info = [["Заемщик", "Дата выдачи", "Сумма кредита", "Валюта"], 
["Иван", "10.05.2016", "10000", "$"], 
["Пётр", "15.03.2012", "50000", "$"], 
["Владимир", "18.11.2017", "5000", "р"]]; 
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); 
function zxc(inf) { 
    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"; 
        } 
    } 
    var childs = inf.childNodes; 
     
    document.getElementById('client').value = childs[0].textContent; 
    document.getElementById('date').value = childs[1].textContent; 
    document.getElementById('sum').value = childs[2].textContent; 
    document.getElementById('val').value = childs[3].textContent; 
} 
for (j=1;j < info.length; j++) { 
  document.getElementById(""+j).addEventListener("dblclick",           function(){ 
    zxc(this); 
   } 
   );  
}

    <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>

Так ваши данные записываются в модальное окно уже с таблицы html.

А вот вариант второй кода модальное окно заполнится уже с вашей переменной.

var table, row, cell, i, j; 
var info = [["Заемщик", "Дата выдачи", "Сумма кредита", "Валюта"], 
["Иван", "10.05.2016", "10000", "$"], 
["Пётр", "15.03.2012", "50000", "$"], 
["Владимир", "18.11.2017", "5000", "р"]]; 
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); 
function zxc(clicked_row, inf) { 
    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"; 
        } 
    } 
    var i = clicked_row.id; 
    //var childs = clicked_row.childNodes; 
     
    document.getElementById('client').value = inf[i][0]; 
    document.getElementById('date').value = inf[i][1]; 
    document.getElementById('sum').value = inf[i][2]; 
    document.getElementById('val').value = inf[i][3]; 
} 
for (j=1;j < info.length; j++) {  
  var inf = info; 
  document.getElementById(""+j).addEventListener("dblclick",           function(){ 
    zxc(this, inf); 
   } 
  );  
}

<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>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Запись данных из get запроса в txt файл

Ребят, нужна помощь с сохранением данных из GET запросаTxt файл создается не после нажатия кнопки submit, а просто при открытии самой формы, в следствии...

230

HTML

Как обработать несколько значений val?

К примеру есть код:

257

HTML

Помочь с кнопкой!

Здравствуйте!

218

HTML

Помочь с <option>

Здравствуйте

297