AJAX TABLE：如何通过onclick在表上的按钮调用函数？ json

Question

我需要通过单击将那个位置的id作为参数传递的按钮来调用该函数，但是我没有得到这种方法，如何使用这种语法来做到这一点？

    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)

  }

Answer 1

尝试将onclick="populateInfo(${data[i]._id}) "更改为：

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

它为我打印了数据。简而言之，您以反引号开头HTML代码，因此在变量之前和之后放置一个，后跟加号以加入字符串。

EDIT正如您所说的那样，该问题尚未解决，建议您出于调试目的简化测试。尝试运行此代码段。如果您的代码仍然无法正常工作，则问题将是您正在传递的数据输入。如果是这种情况，请在浏览器中按CTRL SHIFT E，转到控制台，然后再次尝试运行代码。浏览器将告诉您错误的内容和位置。

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

Answer 2

问题在于使用字符串模板。使用字符串模板创建元素时，由于所有内容都是字符串，因此无法将对象参数传递给事件处理程序。 （除非您将数据作为全局变量并将模板更改为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功能取自here