2

Ao utilizar o script, eu estou quebrando uma tabela de <tr> com elementos <td>. Alguns dos <tr> tem o background vermelho e amarelo. Meu Script isola esse elementos no vetor sla. Cada elemento do vetor fica com um texto de <tr>, cheio de <td>. Eu não sei como fazer, mas gostaria de quebrar o <td> e fazer um vetor com os valores isolados de cada <td>. Como fazer?

const chamados = Array.from(document.querySelectorAll('tr'));
const sla = [];
for(i=0;i < chamados.length;i++){
  if(chamados[i].style.backgroundColor == "red" || chamados[i].style.backgroundColor == "yellow"){
    sla.push(chamados[i]);
    for(j=0; j < sla.length; j++){
      console.log(sla[j]);
    }
    console.log(i);
  }
}

2 Respostas 2

0

Primeiramente não é necessário esse Array.from.

Utilize o children para pegar os elementos filhos desse tr, que esses filhos são o td. Se o td tiver o backgroundColor == 'red' ou backgroundColor == 'yellow' ele vai armazenar o texto que está no td desse tr percorrendo um por um.

const chamados = document.querySelectorAll('tr')
const sla = []

for (let i = 0; i < chamados.length; i++){
  if (chamados[i].style.backgroundColor == 'red' || chamados[i].style.backgroundColor == 'yellow'){
  for (let j = 0; j <chamados[i].children.length; j++)
  sla.push(chamados[i].children[j].innerText)
  }
}
console.log(sla)
<table>
<tr style="background:red;">
    <td>tr0 td0 red</td>
    <td>tr0 td1 red</td>
    <td>tr0 td2 red</td>
</tr>
<tr style="background:green;">
    <td>tr1 td0 green</td>
    <td>tr1 td1 green</td>
    <td>tr1 td2 green</td>
</tr>
<tr style="background:yellow;">
    <td>tr2 td0 yellow</td>
    <td>tr2 td1 yellow</td>
    <td>tr2 td2 yellow</td>
</tr>
</table>

Espero ter ajudado

0

O exemplo do @NoFace usando o chidren para pegar os elementos filhos resolve o problema, mas gostaria de sugerir uma abordagem mais funcional e declarativa.

Pra entender mais sobre o Destructuring usando no parametro da funcão trVermelhoOuAmarelo você pode dar uma olhada aqui: Destructuring assignment. Basicamente ele obtem uma propriedade que está dentro do objeto.
Sobre como funciona o filter aqui: Array.prototype.filter().
Sobre o map e flatMap aqui: Array.prototype.flatMap(). Basicamente o flatMap pega arrays dentro de array e transforma em uma coisa só, se eu tenho [[1,2],3], usando o flatMap eu terei [1,2,3].

const chamados = Array.from(document.querySelectorAll('tr'));

const trVermelhoOuAmarelo = ({ style: { backgroundColor }}) => 
  backgroundColor === 'red' || backgroundColor === 'yellow';
  
const obterInnerText = (element) => element.innerText;
const obterFilhos = (element) => Array.from(element.children);

const sla = chamados
  .filter(trVermelhoOuAmarelo)
  .flatMap(obterFilhos)
  .map(obterInnerText);

console.log(sla);
<table>
  <tr style="background:red;">
      <td>0.0 red</td>
      <td>0.1 red</td>
      <td>0.2 red</td>
  </tr>
  <tr style="background:green;">
      <td>1.0 green</td>
      <td>1.1 green</td>
      <td>1.2 green</td>
  </tr>
  <tr style="background:yellow;">
      <td>2.0 yellow</td>
      <td>2.1 yellow</td>
      <td>2.2 yellow</td>
  </tr>
</table>

Você ainda pode deixar as coisas mais simples já filtrando apenas os elementos vermelhos e amarelos no querySelector, exemplo:

const expression = "tr:not([style*='green'])";
const chamados = Array.from(document.querySelectorAll(expression));

const sla = chamados
  .flatMap(x => Array.from(x.children))
  .map(x => x.innerText);

console.log(sla);
<table>
  <tr style="background:red;">
    <td>0.0 red</td>
    <td>0.1 red</td>
    <td>0.2 red</td>
  </tr>
  <tr style="background:green;">
    <td>1.0 green</td>
    <td>1.1 green</td>
    <td>1.2 green</td>
  </tr>
  <tr style="background:yellow;">
    <td>2.0 yellow</td>
    <td>2.1 yellow</td>
    <td>2.2 yellow</td>
  </tr>
</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .