Javascript-单击表行上的事件以更改HTML元素

Question

我对JavaScript还是很陌生，因此，如果其中任何一个不清楚，我们深表歉意：

我已经在JS中动态创建了一个表格，并向每行添加了一个点击处理程序，效果很好。 但是我希望单击以更改我在HTML中获得的单独容器中的某些元素-即，如果单击表的第一行，则将更改文本以显示有关该行内容的更多详细信息。

我苦苦挣扎的是如何获取它，以便单击每一行将其更改为该行的详细信息（即单击第二行，它更改为第二行的详细信息，单击第五行，并更改为第5行等的详细信息）。

我有一个函数设置-loadDetails（num），其中参数num应该是行号（例如，如果我调用loadDetails（0），它将返回第一行的详细信息）。 因此，基本上我想创建一些东西，以便对于每一行，它将使用正确的数字作为参数来调用此函数。 任何帮助将不胜感激？

function myFunction() {

    var rows = document.getElementsByTagName("tr");

    for (var i = 0; i < rows.length; i++){
    //code in here?
    //then call the loadDetails() function?  
    }

    //or call the loadDetails() function here?  

}

编辑：这是创建表的代码-它基本上是创建一个具有三列的表，并从JSON数组（tableOne）获取其数据。 因此，第三行是我苦苦挣扎的地方-我不确定如何为tr分配ID，以便每次循环时它都是唯一的？

for (var i = 0; i < tableOne.length; i++) { 
    var row1 = document.createElement("tr");
    row1.id = "row" + i;
    row1.addEventListener("click", loadSelected, false);
    var cell1 = document.createElement("td");
    cell1.innerHTML = tableOne[i].firstName;
    var cell2 = document.createElement("td");
    cell2.innerHTML = tableOne[i].lastName;
    var cell3 = document.createElement("td");
    cell3.innerHTML = tableOne[i].age;

    row1.appendChild(cell1);
    row1.appendChild(cell2);
    row1.appendChild(cell3);

    tbody.appendChild(row1);
    table.appendChild(row1);
}

Answer 1

您可以使用rowIndex获取被点击的行的索引

row.addEventListener("click", myfunction, false);

在您的函数中，您可以使用this.rowIndex来获取被点击行的索引

function myfunction(e) {
  loadDetails(this.rowIndex)
}

Answer 2

首先，您需要一种以独特的方式跟踪每一行的方法，例如数据库表行的id字段将对此有所帮助。 因此，当您渲染表格时，可以将此值添加到每一行。

您如何呈现<tr>

<tr id="row1" onClick="myFunction"> Row 01 </tr>
<tr id="row2" onClick="myFunction"> Row 02 </tr>
<tr id="row3" onClick="myFunction"> Row 03 </tr>

然后，您可以从函数中按如下方式访问id

function myFunction(e) {
  let id = e.target.id; 
  if(id) {
     loadDetails(id);
  }
}