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

Posted 2021-04-17

我还是javascript新手，所以如果有任何不清楚的话，请道歉：

我已经在JS中动态创建了一个表，并为每一行添加了一个单击处理程序，运行正常。但我希望点击更改我在html中的单独容器中的一些元素 - 即如果您单击表格的第一行，那么这将更改文本以显示有关该行中的内容的更多详细信息。

我正在努力的方法是如何获得它，以便点击每一行将其更改为该行的详细信息（即单击第2行，它将更改为第2行的详细信息，单击第5行，它将更改为第5行的细节等）。

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

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);
}

答案

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

另一答案

您可以使用rowIndex来获取所单击行的索引

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

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

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