如何在使用 javascript 创建的 javascript 表中单击时从数组中获取特定项目

Question

我的代码是这样的

var html = "<table>";
for (var i = 0; i < data.length; i++) {
  html += "<tr>";
  html += "<td>" + data[i].personName + "</td>";
  html += "<td>" + data[i].fatherName + "</td>";
  html += "<td>" + data[i].personPhone + "</td>";
  html += "<td>" + data[i].personCnic + "</td>";
  html += "<td>" + data[i].deliveryDate + "</td>";

  html += "<td>" + data[i].submissionDate + "</td>";
  html += "<td>" + data[i].year + "</td>";
  html += "<td>" + data[i].session + "</td>";
  html += "<td>" + data[i].board + "</td>";
  html += "<td>" + data[i].amount + "</td>";


  html += "</tr>";

}
html += "</table>";
document.getElementById("box").innerHTML = html;

如何使用这种方法使用事件监听器？ 我见过很多方法，但没有一种符合我的情况。

Answer 1

您需要添加一个 onClick，它对每一行都不同，在那里您将行索引作为参数传递 :) 而不是您可以在函数上处理它。

var html = "<table>";
    for (var i = 0; i < data.length; i++) {
        html+="<tr onclick='myFunction("+i+")'>";
        html+="<td>"+data[i].personName+"</td>";
        html+="<td>"+data[i].fatherName+"</td>";
        html+="<td>"+data[i].personPhone+"</td>";
        html+="<td>"+data[i].personCnic+"</td>";
        html+="<td>"+data[i].deliveryDate+"</td>";

        html+="<td>"+data[i].submissionDate+"</td>";
        html+="<td>"+data[i].year+"</td>";
        html+="<td>"+data[i].session+"</td>";
        html+="<td>"+data[i].board+"</td>";
        html+="<td>"+data[i].amount+"</td>";


        html+="</tr>";

    }
    html+="</table>";

function myFunction(x) {
  console.log('index' + x + 'was clicked')
  // do the handling here
}

在这里你有你的演示

 let data = [{ personName: "test1"}, {personName: "test2"}] var html = "<table>"; for (var i = 0; i < data.length; i++) { html+="<tr onclick='myFunction("+i+")'>"; html+="<td>"+data[i].personName+"</td>"; html+="</tr>"; } html+="</table>"; document.getElementById("demo").innerHTML = html; function myFunction(i) { console.log('index ' + i + ' was clicked') // do the handling here console.log(data[i]) }

 <p id="demo"></p>

Answer 2

您可以在将 html 添加到 DOM 后添加事件侦听器。

像这样：

document.getElementById("box").querySelectorAll('tr').forEach(tr => {
  tr.addEventListener('click', function() {
    console.log(tr.textContent);
  });
});

和工作演示：（我添加了一些哑数据所以演示会工作）

 const data = new Array(5).fill(0).map((_, idx) => ({ personName: `personName-${idx}`, fatherName: `fatherName-${idx}`, personPhone: `personPhone-${idx}`, personCnic: `personCnic-${idx}`, deliveryDate: `deliveryDate-${idx}`, submissionDate: `submissionDate-${idx}`, year: `year-${idx}`, session: `session-${idx}`, board: `board-${idx}`, amount: `amount-${idx}` })); var html = "<table>"; for (var i = 0; i < data.length; i++) { html += "<tr>"; html += "<td>" + data[i].personName + "</td>"; html += "<td>" + data[i].fatherName + "</td>"; html += "<td>" + data[i].personPhone + "</td>"; html += "<td>" + data[i].personCnic + "</td>"; html += "<td>" + data[i].deliveryDate + "</td>"; html += "<td>" + data[i].submissionDate + "</td>"; html += "<td>" + data[i].year + "</td>"; html += "<td>" + data[i].session + "</td>"; html += "<td>" + data[i].board + "</td>"; html += "<td>" + data[i].amount + "</td>"; html += "</tr>"; } html += "</table>"; const box = document.getElementById("box"); box.innerHTML = html; box.querySelectorAll('tr').forEach(tr => { const _tr = tr; tr.addEventListener('click', () => { console.log(_tr.textContent); }); });

 <div id="box"></div>