Zapis do tablicy wartości z HTMLA

Question

Witam serdecznie!
W moim kodzie HTML powtarza sie wielokrotnie schemat: 

<tr class="cos tam">Zawartosc</tr>
<tr class="cos tam2">Zawartosc2</tr>

no i ogólnie to jest zrobione na tabelach.

Chciałem zawartosc, która pojawia sie w kazdej klasie zapisać w tablicy(tj. dla klasy "cos tam" osobna, dla "cos tam2" osobna itd.) Czy istnieje sposób aby to w miare prosto wykonać? 

Comments

Chodzi Ci o pobranie danych do postaci:

{
  'cos tam': 'Zawartosc',
  'cos tam2': 'Zawartosc2'
}

czy inaczej?

---

Mysle ze to moze byc jakies rozwiązanie, tylko ze tych elementów bedzie dosc duzo dla kazdej klasy

---

Można treść elementów wrzucić do tablic, które będą przypisane do nazw klas. A, w ogóle, do czego Ci taka struktura jest potrzebna? Po co Ci mapowanie klas do zawartości elementów?

---

Chciałbym wyeksportować dane do pliku vcf

Answer 1

W prostym wariancie można użyć querySelectorAll do pobrania elementów oraz reduce do zmapowania danych do obiektu:

const allElementsWithClass = document.querySelectorAll("table [class]");
const mappedClassesToContents = [...allElementsWithClass].reduce(
  (mappedElements, element) => {
    const classes = element.classList.value;

    if (!mappedElements[classes]) {
      mappedElements[classes] = [];
    }

    mappedElements[classes].push(element.textContent.trim());
    
    return mappedElements;
  }, {}
);

console.log(mappedClassesToContents);
// {
//  cos tam: ["Zawartosc"]
//  cos tam2: ["Zawartosc2", "Zawartosc21"]
// }

Comments

@ScriptyChris Ja bym dodał taki mały z pozoru "szczególik", ale ...

mianowicie ("table [class]") na ("table tr[class]")

dla przykładowej tabeli

<table>
  <tr class="class1"><td class="lorem1">row1col1</td><td>row1col2</td><td>row1col3</td></tr>
  <tr class="class2"><td>row2col1</td><td>row2col2</td><td>row2col3</td></tr>
  <tr class="class3"><td>row3col1</td><td>row3col2</td><td>row3col3</td></tr>
  <tr class="class1"><td>row4col1</td><td>row4col2</td><td class="lorem2">row4col3</td></tr>
  <tr class="class4"><td>row5col1</td><td>row5col2</td><td>row5col3</td></tr>
  <tr class="class5"><td>row6col1</td><td>row6col2</td><td>row6col3</td></tr>
  <tr class="class6"><td>row7col1</td><td class="lorem1">row7col2</td><td>row7col3</td></tr>
  <tr class="class2"><td>row8col1</td><td>row8col2</td><td>row8col3</td></tr>
  <tr class="class1"><td>row9col1</td><td>row9col2</td><td>row9col3</td></tr>
</table>

wynik bez tr-a (chyba, że autorowi pytania o to chodziło)

wynik z dodanym tr-em

 

Pozdrawiam.