select all th of a selected row

Question

select all th of a selected row

Navigation

#1 by (0 votes)

0

in this opportunity I seek to achieve the following; I have a row selected by clicking on its first element th to which I gave a class and with the querySelectorAll and map I formulate an event for each of them, now well, how do I select the th of that selected row, that is, only the th that remain in purple when doing click in the first th of each 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>

By doing the same transform them Array I can not divide them and get what I want the truth I pause at that point ...

javascript html

asked by Gabriela 02.11.2018 в 04:14

source

1 answer

I do not register in the database but in the window it says "Data was saved correctly". Is there a possibility of an error here? Read and show database FIrebase in Recycler View

score 0 · Answer 1

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>