Javascript - событие клика по строкам таблицы, чтобы изменить элементы HTML

Question

Я все еще новичок в JavaScript, поэтому извиняюсь, если что-то из этого неясно:

Я динамически создал таблицу в JS и добавил обработчик кликов для каждой строки, что работает нормально. Но я хочу, чтобы этот щелчок изменил некоторые элементы в отдельном контейнере, который я получил в HTML - то есть, если вы нажмете на 1-ую строку таблицы, это изменит текст, чтобы показать больше деталей о том, что находится в этой строке.

Я пытаюсь понять, как получить его, чтобы щелчок по каждой строке изменил его на детали для этой строки (т. Е. Нажмите на строку 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, чтобы он был уникальным каждый раз, когда он повторяется?

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