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来获取被点击的行的索引

data['from_timestamp']=data['from_timestamp'].values.astype('datetime64[s]')

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

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

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

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

2 个答案: