1

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

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>

4
  • А что там за переменная info ? используете без объявления не где. Commented 19 нояб. 2017 в 15:57
  • она объявлена, там двумерный массив
    – user271479
    Commented 19 нояб. 2017 в 16:01
  • Где там? вы в пятой строке используете переменную и здесь в коде не видно что оно до этого объявлена. Commented 19 нояб. 2017 в 16:03
  • Добавил объявление переменных
    – user271479
    Commented 19 нояб. 2017 в 16:19

1 ответ 1

0

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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