I have a table generated with data from an array (the array contains more info than what is displayed in the table). I want to click on a row to see all info from the element.

Earlier done it like this:

let rows = document.getElementsByTagName("tr");

 for (let row of rows) {
        row.onclick = function rowClicked(evt) {
        selected = myArray[evt.target.parentElement.rowIndex];
        //code (not relevant)
        }

But since I added a search feature myArray[1] is not necessarily equal to row number 1 and this method doesn't work.

Is it another way to find the element in the array from clicking on a random row?

The table is generated like this:

function drawTable(data) {
    let table = document.getElementById("table");
    table.innerHTML = "";

    let tableHead = document.createElement("thead");
    let colHeads = ["Names"];

    for (let header of colHeads) {
        let cell = document.createElement("th")
        cell.innerHTML = header;
        tableHead.appendChild(cell);
    }
    table.appendChild(tableHead)

    for (var i = 0; i < data.length; i  ){

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

        let name = document.createElement("td");
        name.innerHTML = data[i].name.first   "&nbsp"   data[i].name.last;
        row.appendChild(name);

        table.appendChild(row);
    }
}

Any help is greatly appreciated!

CodePudding user response：

You need some way to map a table row to its relevant entry in myArray which isn't dependent on the position of the row in the table. Data attributes wouldn't be affected.

Create a data-index attribute on each table row. Then, when it's clicked use the value of the data-index attribute to access the relevant myArray entry.

CodePudding user response：

A simple version of what you have in mind. The visible line is bound with a click event. As soon as it is triggered, it gets the ref-id from the clicked element and toggles the reference column.

const clickables = document.querySelectorAll('.clickable');
console.log(clickables)

clickables.forEach(tr => {
  tr.addEventListener('click', (e) => {    
    const ref = e.target.parentElement.getAttribute('data-ref');
    const row = document.querySelector('#'   ref);
    row.classList.toggle('hide');    
  });
});

td {
  text-align: center;
  padding: 20px;
}

.hide {
  display: none;
}

.clickable {
  cursor: pointer;
}
.clickable:hover {
  background: #ccc;
}

<table border="1">
  <tr  data-ref="a">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr id="a" >
    <td>a1</td>
    <td>b2</td>
  </tr>  
  
  <tr  data-ref="b">
    <td>3</td>
    <td>4</td>
  </tr>
  <tr id="b" >
    <td>a3</td>
    <td>a4</td>
  </tr>    
</table>