en esta oportunidad busco conseguir lo siguiente; tengo una fila seleccionada al hacer click en su primer elemento th
al cual le di una clase y con el querySelectorAll
y map
formulo un evento para cada uno de ellos, ahora bien, como consigo seleccionar los th
de esa fila seleccionada, es decir solo los th
que quedan en morado al hacer click
en el primer th
de cada row.
let getSelectorA = s => document.querySelectorAll(s);
Array.from(getSelectorA('.ev')).map((e,i) => {
e.addEventListener('click', event => {
Array.from(getSelectorA('tr'))[i +1].classList.toggle('purple');
});
});
table, th, td {
border: 1px solid black;
padding: 1rem;
}
.purple{
background: purple;
}
<table>
<thead>
<tr>
<th>by</th>
<th>Date</th>
<th>Tras</th>
</tr>
</thead>
<tbody>
<tr>
<th class="ev">byOne</th>
<th>dateOne</th>
<th>trasOne</th>
</tr>
<tr>
<th class="ev">byTwo</th>
<th>dateTwo</th>
<th>trasTwo</th>
</tr>
<tr>
<th class="ev">bylast</th>
<th>datelast</th>
<th>traslast</th>
</tr>
</tbody>
</table>
Al hacer lo mismo transformarlos Array
no consigo como dividir los mismos y conseguir lo que deseo la verdad me pause en ese punto...
th
que quedan en morado al activar el evento que he puesto... solo eso.