Array from HTML cell table with Javascript-CodePudding

How to convert HTML cell contents to arrays with Javascript?

I would like to get these arrays:


const num45 = [4, 44, 46, 30, 43];
const num44 = [13, 25, 6, 49, 31];
const num43 = [44, 38, 11, 23, 37];

Link to pen: https://codepen.io/georgincz/pen/ZEJPpmO

<table class="table">
        <thead>
            <tr>
                <th title="date">date</th>
                <th title="year">year</th>
                <th title="week">week</th>
                <th title="1-num">1. num</th>
                <th title="2-num">2. num</th>
                <th title="3-num">3. num</th>
                <th title="4-num">4. num</th>
                <th title="5-num">5. num</th>
            </tr>
        </thead>
        <tbody>
            <tr id="45">
                <td class="date">12. 11. 2021</td>
                <td class="year">2021</td>
                <td class="week">45</td>
                <td class="number">4</td>
                <td class="number">44</td>
                <td class="number">46</td>
                <td class="number">30</td>
                <td class="number">43</td>
                <td></td>
            </tr>
            <tr id="44">
                <td class="date">5. 11. 2021</td>
                <td class="year">2021</td>
                <td class="week">44</td>
                <td class="number">13</td>
                <td class="number">25</td>
                <td class="number">6</td>
                <td class="number">49</td>
                <td class="number">31</td>
                <td></td>
            </tr>
          </tbody>
    </table>

When I create an array from all the cells in a table, I only see an empty array.

// nodes "td" to array -------------------------------------

const nodes = document.querySelectorAll('td')
console.log(Array.isArray(nodes)) // print false

const nodesArray = Array.from(nodes)
console.log(Array.isArray(nodesArray)) // print true

console.log(nodesArray)

CodePudding user response：

You can convert the rows collection to array , map that array and return a map of the text for each number cell in each row

const rowsArray = Array.from(document.querySelector('tbody').rows)

const data = rowsArray.map(row =>
  Array.from(row.querySelectorAll('.number')).map(cell=>cell.textContent))

console.log(data)

<table class="table">
        <thead>
            <tr>
                <th title="date">date</th>
                <th title="year">year</th>
                <th title="week">week</th>
                <th title="1-num">1. num</th>
                <th title="2-num">2. num</th>
                <th title="3-num">3. num</th>
                <th title="4-num">4. num</th>
                <th title="5-num">5. num</th>
            </tr>
        </thead>
        <tbody>
            <tr id="45">
                <td class="date">12. 11. 2021</td>
                <td class="year">2021</td>
                <td class="week">45</td>
                <td class="number">4</td>
                <td class="number">44</td>
                <td class="number">46</td>
                <td class="number">30</td>
                <td class="number">43</td>
                <td></td>
            </tr>
            <tr id="44">
                <td class="date">5. 11. 2021</td>
                <td class="year">2021</td>
                <td class="week">44</td>
                <td class="number">13</td>
                <td class="number">25</td>
                <td class="number">6</td>
                <td class="number">49</td>
                <td class="number">31</td>
                <td></td>
            </tr>
          </tbody>
    </table>

CodePudding user response：

Something like this?

var rows = document.getElementsByTagName("tr");
var i = 1;
nums = {};
var j, week;
while(i < rows.length) {
  week = parseInt(rows[i].children[2].innerText);
  nums[week] = new Array();
  j = 3;
  while(j < rows[i].children.length && rows[i].children[j].innerText) {
    nums[week].push(parseInt(rows[i].children[j].innerText));
    j  ;
  };
  i  ;
};
console.log(nums);

.date {
    background-color: rgb(193, 128, 255);
}

.year {
    background-color: cadetblue;
}

.week {
    background-color: chocolate;
}

.number {
    background-color: rgb(134, 168, 76);
}

table {
    text-align: right;
}

th, td {
    padding: 4px 10px;
}

<table class="table">
        <thead>
            <tr>
                <th title="date">date</th>
                <th title="year">year</th>
                <th title="week">week</th>
                <th title="1-num">1. num</th>
                <th title="2-num">2. num</th>
                <th title="3-num">3. num</th>
                <th title="4-num">4. num</th>
                <th title="5-num">5. num</th>
            </tr>
        </thead>
        <tbody>
            <tr id="45">
                <td class="date">12. 11. 2021</td>
                <td class="year">2021</td>
                <td class="week">45</td>
                <td class="number">4</td>
                <td class="number">44</td>
                <td class="number">46</td>
                <td class="number">30</td>
                <td class="number">43</td>
                <td></td>
            </tr>
            <tr id="44">
                <td class="date">5. 11. 2021</td>
                <td class="year">2021</td>
                <td class="week">44</td>
                <td class="number">13</td>
                <td class="number">25</td>
                <td class="number">6</td>
                <td class="number">49</td>
                <td class="number">31</td>
                <td></td>
            </tr>
            <tr id="43">
                <td class="date">29. 10. 2021</td>
                <td class="year">2021</td>
                <td class="week">43</td>
                <td class="number">44</td>
                <td class="number">38</td>
                <td class="number">11</td>
                <td class="number">23</td>
                <td class="number">37</td>
            </tr>
          </tbody>
    </table>