0

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...

6
  • explicate mejor no te e entendido!
    – Bryro
    Commented el 2 nov. 2018 a las 3:49
  • @Bryro necesito seleccionar los th que quedan en morado al activar el evento que he puesto... solo eso.
    – Gabriela
    Commented el 2 nov. 2018 a las 3:52
  • Necesitas seleccionar todos los de cada fila morada o alguno en particular de cada fila morada? Es decir, si necesitas [byOne, byTwo] o [{byOne, dateOne, trasOne}, {byTwo, dateTwo, trasTwo}]
    – Sema
    Commented el 2 nov. 2018 a las 4:08
  • Te referis a que solo la primer columna debería ser morada? Commented el 2 nov. 2018 a las 4:12
  • hola @Sema si exactamente eso necesito, todos los de la fila que quedan en morado al dispararse el evento, gracias!
    – Gabriela
    Commented el 2 nov. 2018 a las 16:15

1 respuesta 1

0

let getSelectorA = s => document.querySelectorAll(s);

Array.from(getSelectorA('.ev')).map((e,i) => {
  e.addEventListener('click', event => {
  	var arr = Array.from(getSelectorA('tr'))[i +1];
  	console.log(arr.querySelectorAll("th"));
    arr.classList.toggle('purple');

  });
});
// en caso de que solo deses colorear solo el th que se seleccione


/*el = getSelectorA("th");

for(var i=0; i < el.length; i++){
el[i].addEventListener('click', (event) => {
   event.target.classList.toggle('purple');
}, false);
}*/
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>

4
  • no entiendo realmente es exactamente lo mismo que tengo, donde seleccionas los th de la fila que se selecciona en morado al dispararse el evento?
    – Gabriela
    Commented el 2 nov. 2018 a las 16:16
  • con el event.target
    – Bryro
    Commented el 2 nov. 2018 a las 16:35
  • pero el event.target me selecciona solo el th donde se dispara el evento, que en este caso es el primer th de la row... necesito seleccionar todos los th de la row donde se dispara el evento.
    – Gabriela
    Commented el 2 nov. 2018 a las 17:09
  • ya es que debes aprender a formular las preguntas bien!
    – Bryro
    Commented el 2 nov. 2018 a las 17:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.