时间戳

首页 > 解决方案 > AJAX TABLE：如何通过 onclick in 表格上的按钮调用函数？json

javascript - AJAX TABLE：如何通过 onclick in 表格上的按钮调用函数？json

问题描述

我需要通过单击将该位置的 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)

  }

标签： javascriptajaxhtml-tableparametersonclick

解决方案

问题在于使用字符串模板。当您使用字符串模板创建元素时，不可能将对象参数传递给事件处理程序，因为一切都是字符串。（除非您将数据设为全局变量并将模板更改为此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函数取自这里

推荐阅读