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

Question

我对 JavaScript 还很陌生，所以如果有任何不清楚的地方，我深表歉意:

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

我正在努力的是如何获取它，以便单击每一行会将其更改为该行的详细信息(即单击第 2 行，它会更改为第 2 行的详细信息，单击第 5 行，然后单击它更改为第 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

首先，您需要一种以独特方式跟踪每一行的方法。诸如数据库表行的 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);
  }
}