javascript - 我已经从 javascript 将表格附加到 html 中，但现在我想通过传递它们的 id 从字体真棒图标调用 onclick 函数

Question

我正在调用 onclick 函数，但它不起作用

    for(var i =0; i<data.data.length; i++)    {
            console.log(data.data[i]._id); 
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>'+j+'</td><td>'+data.data[i].name+'</td>
            <td>'+data.data[i].email+'</td><td>'+data.data[i].gender+'</td>
            <td>'+data.data[i].gender+'</td><td>'+data.data[i].address+'</td>
            <td>'+data.data[i].city+'</td><td>'+data.data[i].state+'</td>
            <td>'+data.data[i].pin+'</td><td>'+data.data[i].country+'</td><td>
            <span><i class = "fa fa-pencil" onclick="edit('+data.data[i]._id+')">
            </i>&nbsp;|&nbsp;<i class="fa fa-trash"></i></span></td></tr>';
            tbody.appendChild(tr);
            j++;
      }

标签： javascript

Answer 1

这是解决方案之一。

它不传递 ID，而是使用.parentElement属性来获取图标附加到的整行。

在您的模板中，在<i>标签内，我添加onclick="myFunction(event)"了将myFunction(e)在每个图标上执行的标签。

---

let data = {
  data: [{
      name: "Holmes",
      email: "[e-mail]",
      gender: "male",
      address: "221B Baker Street",
      city: "London",
      state: "London",
      pin: "x",
      country: "England",
      _id: 1
    },
    {
      name: "Barry",
      email: "[e-mail]",
      gender: "male",
      address: "221B Baker Street",
      city: "London",
      state: "London",
      pin: "x",
      country: "England",
      _id: 2
    },
    {
      name: "Holmes",
      email: "[e-mail]",
      gender: "male",
      address: "221B Baker Street",
      city: "London",
      state: "London",
      pin: "x",
      country: "England",
      _id: 3
    }
  ]
}

let j = 0;
let tbody = document.querySelector('#myTable tbody');

for (var i = 0; i < data.data.length; i++) {
  //console.log(data.data[i]._id);
  var tr = document.createElement('tr');
  tr.innerHTML = '<td>' + j + '<td>' + data.data[i].name + '</td><td>' + data.data[i].email + '</td><td>' + data.data[i].gender + '</td><td>' + data.data[i].gender + '</td><td>' + data.data[i].address + '</td><td>' + data.data[i].city + '</td><td>' + data.data[i].state + '</td><td>' + data.data[i].pin + '</td><td>' + data.data[i].country + '</td><td><span><i class = "fa fa-pencil" onclick="edit(' + data.data[i]._id + ')"></i>&nbsp;|&nbsp;<i class="fa fa-trash" onclick="myFunction(event)"></i></span></td></tr>';
  tbody.appendChild(tr);
  j++;
}

function myFunction(e) {
  let target = e.target;
  let targetSpan = target.parentElement;
  let targetTd = targetSpan.parentElement;
  let targetTr = targetTd.parentElement;
  targetTr.style.background = "yellow";
  //console.log(targetTr);
}

td {
  border: 1px solid;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<table id="myTable">
  <tbody></tbody>
</table>