在 forEach 数组中使用索引

Question

我有一个对象数组显示在表格中...我的目标是通过单击表中的某个特定项来访问该项。然后，我将能够添加/删除类并访问值，这最终是我需要做的。这就是我陷入困境的地方...myArray.forEach((item, index) => {// Sort through array, render to DOM  document.getElementById('myElementID').innerHTML +=    '<tr>' +    '<td>' +    item.thing +    '</td>' +    '<td' +    item.thing2 +    '</td>' +    '</tr>';// Completely stuck... I've added an event listener to each table row.  addEventListener('dblclick', () => {    console.log(//I want to log the index of the item I just clicked on);  });});请原谅我，如果这很容易，或者我做错了，但我对所有这些都很陌生，我无法以谷歌有帮助的方式组织我的问题。提前致谢。编辑 - 一些html根据要求...      <table id="myElementID">        <tr>          <th id="heading">Heading1</th>          <th id="anotherHeading">Heading2</th>        </tr>      </table>再次编辑（抱歉）...和一个JS小提琴。您将看到它记录了两个索引，而不仅仅是我单击的索引。https://jsfiddle.net/c4pd5wmg/4/

Answer 1

而不是搞砸索引等。您可以将事件处理程序附加到事件处理程序中，并且只在事件处理程序中引用。我还清理了您添加的tr。tre.target

const myArray= [{number: 45,otherNumber: 55},{number: 48,otherNumber:58}]

      myArray.forEach((item, index) => {

    

          let row = document.createElement("tr");

          let cell = document.createElement("td");

          cell.innerHTML = item.number;

          row.appendChild(cell);

          

          cell = document.createElement("td");

          cell.innerHTML = item.otherNumber;

          row.appendChild(cell);

    

          document.getElementById('myElementID').appendChild(row);

        

          row.addEventListener('dblclick', (e) => {

             console.log(e.target);

          });

        });

<table id="myElementID">

        <tr>

          <th id="heading">Heading1</th>

          <th id="anotherHeading">Heading2</th>

        </tr>

      </table>