javascript - 如何在使用javascript创建的javascript表中单击时从数组中获取特定项(how to get the specific item from array on click in javascript table created using javascript)

Question

my code is this

(我的代码是这样)

 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;

how can I use an event listeners using this approach?

(如何使用这种方法使用事件监听器？)

I have seen many methods but none of that match my scenario.

(我见过很多方法，但是没有一种与我的情况相符。)

  ask by Muhammad Abdullah translate from so

Answer 1

You need to add an onClick which is different for every row, in there you pass as parameter the row index :) than you can handle it on the function.

(您需要添加每行不同的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
}