來自 HTML 單元格表的數組與 Javascript

Question

如何使用 Javascript 將 HTML 單元格內容轉換為 arrays？

我想得到這些 arrays：

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

筆鏈接： 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>

當我從表中的所有單元格創建一個數組時，我只看到一個空數組。

// 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)

Answer 1

您可以將行集合轉換為數組 map 該數組並返回每行中每個數字單元格的文本 map

 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>

Answer 2

像這樣的東西？

 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>