AJAX ТАБЛИЦА: как вызвать функцию, нажав на кнопку на столе? json - PullRequest
Новая
       4

AJAX ТАБЛИЦА: как вызвать функцию, нажав на кнопку на столе? json

0 голосов
/ 02 февраля 2020

Мне нужно вызвать функцию, нажав на кнопку, передавая идентификатор этой позиции в качестве параметра, но я не понял, как это сделать, используя этот синтаксис? 

    function populateTable(data){
    var table = document.getElementById('table-sector')
    for (var i = 0; i < data.length; i++) { 
      var row = ` <tr><td>${data[i].nome}</td>
                      <td>${data[i].sigla}</td>
                      <td>${data[i].ramal}</td>
                      <td>${data[i].email}</td>
                      <td><button onclick="populateInfo(${data[i]._id}) "type="button" class="btn btn-primary" " data-toggle="modal"
                      data-target="#info">+</button></td>
                      </td>
                  </tr>`



      table.innerHTML+= row

    }
  }

function populateInfo(data){

       console.log(data)

  }

Ответы [ 2 ]

0 голосов
/ 03 февраля 2020

Проблема заключается в использовании шаблона строки. Когда вы использовали строковые шаблоны для создания элементов, невозможно передать аргументы объекта в обработчики событий, потому что все является строкой. (За исключением случаев, когда вы делаете данные как глобальную переменную и изменяете свой шаблон на populateInfo(data[${i}]._id), что не является хорошей практикой.) Вместо этого вы должны создать свой элемент из строки, материализовать его и затем присоединить обработчик событий, как показано ниже: 

const data = [{
  nome: "jhon",
  sigla: "doe",
  ramal: "ramal",
  email: "jhondoe@mail"
}, {
  nome: "jhon1",
  sigla: "doe1",
  ramal: "ramal1",
  email: "jhondoe1@mail"
}];

function populateTable(data) {
  var table = document.getElementById('table-sector')
  for (let i = 0; i < data.length; i++) { // using let instead of var is a must

    var row = ` <tr><td>${data[i].nome}</td>
                      <td>${data[i].sigla}</td>
                      <td>${data[i].ramal}</td>
                      <td>${data[i].email}</td>
                      <td><button  "type="button" class="btn btn-primary" " data-toggle="modal"
                      data-target="#info">+</button></td>
                      </td>
                  </tr>`
    const tr = createElement(row);
    const button = tr.querySelector("button");
    button.addEventListener("click", () => populateInfo(data[i]));
    table.appendChild(tr);

  }
}

function populateInfo(data) {
  console.log(data);
}

function createElement(str) {
  var frag = document.createDocumentFragment();
  var elem = document.createElement('table');
  elem.innerHTML = str;

  while (elem.childNodes[0]) {
    frag.appendChild(elem.childNodes[0]);
  }
  return frag;
}

populateTable(data);
<div>
  <table id="table-sector"></table>
</div>

createElement функция взята из здесь

0 голосов
/ 02 февраля 2020

Попробуйте изменить onclick="populateInfo(${data[i]._id}) " на: 

onclick="populateInfo('` + data[i]._id + `')"

Он распечатал данные для меня. Проще говоря, вы начали код HTML с обратной кавычки, поэтому ставьте один до и после переменной, а затем добавляйте знак плюс, чтобы присоединить строки.

РЕДАКТИРОВАТЬ , как вы сказали, проблема не был решен, я предлагаю упростить тест для целей отладки. Попробуйте запустить этот фрагмент. Если ваш код все еще не работает, проблема будет в вводе данных , который вы передаете . В этом случае нажмите CTRL SHIFT E в браузере, go на консоли и попробуйте снова запустить код. Браузер скажет вам, в чем и где ошибка. 

<div id="table-sector"></div>
<div id="output"></div>

<script>
	
    function populateTable(data){
    var table = document.getElementById('table-sector');
    for (var i = 0; i < data.length; i++) { 
      var row = ` <tr>
                      <td><button onclick="populateInfo('` + data[i] + `')  "type="button" class="btn btn-primary" " data-toggle="modal"
                      data-target="#info">+</button></td>
                      </td>
                  </tr>`



      table.innerHTML+= row;

    }
  }

	function populateInfo(data){
	
		   document.getElementById("output").innerHTML += data;
		   console.log(data)

	}
	
	populateTable([1,2,3,4,5]);
</script>
...