Tengo una tabla generada con datos de una matriz (la matriz contiene más información de la que se muestra en la tabla). Quiero hacer clic en una fila para ver toda la información del elemento.
Anteriormente lo hizo así:
let rows = document.getElementsByTagName("tr"); for (let row of rows) { row.onclick = function rowClicked(evt) { selected = myArray[evt.target.parentElement.rowIndex]; //code (not relevant) } Pero como agregué una función de búsqueda, myArray[1] no es necesariamente igual a la fila número 1 y este método no funciona.
¿Es otra forma de encontrar el elemento en la matriz al hacer clic en una fila aleatoria?
La tabla se genera así:
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 + " " + data[i].name.last; row.appendChild(name); table.appendChild(row); } }¡Cualquier ayuda es muy apreciada!
Necesita alguna forma de asignar una fila de la tabla a su entrada relevante en myArray que no depende de la posición de la fila en la tabla. Los atributos de datos no se verían afectados.
Cree un atributo data-index en cada fila de la tabla. Luego, cuando se haga clic en él, use el valor del atributo data-index para acceder a la entrada relevante myArray .
Una versión simple de lo que tienes en mente. La línea visible está enlazada con un evento de clic. Tan pronto como se activa, obtiene el ID de referencia del elemento en el que se hizo clic y alterna la columna de referencia.
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 class="clickable" data-ref="a"> <td>1</td> <td>2</td> </tr> <tr id="a" class="hide"> <td>a1</td> <td>b2</td> </tr> <tr class="clickable" data-ref="b"> <td>3</td> <td>4</td> </tr> <tr id="b" class="hide"> <td>a3</td> <td>a4</td> </tr> </table>