使用js獲取html表數據作為數組

Question

我需要一個腳本，我可以在其中獲取 div 中 html 表的行和列的二維數組。

預期的 output 是

[
    ["Company", "Contact", "Country"],
    ["Alfreds Futterkiste", "Maria Anders", "Germany"],
    ["Centro comercial Moctezuma", "Francisco Chang", "Mexico"],
    ["Ernst Handel", "Roland Mendel", "Austria"],
    ["Island Trading", "Helen Bennett", "UK"],
    ["Laughing Bacchus Winecellars", "Yoshi Tannamuri", "Canada"],
    ["Magazzini Alimentari Riuniti", "Giovanni Rovelli", "Italy"]
]

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="results-table"> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <script> prompt("copy this text",$("#results-table table").text()) </script>

我需要一個腳本，我可以在其中獲取 div 中 html 表的行和列的二維數組。

Answer 1

使用reducer ，例如

 const toValues = [...document.querySelectorAll(`#results-table tr`)].reduce( (acc, row, i) => acc.concat( [ [...row.querySelectorAll(i < 1? `th`: `td`) ].map(c => c.textContent) ] ), []); document.querySelector(`pre`).textContent = JSON.stringify(toValues, null, 2);

 .demo { display: none; }

 <pre></pre> <div id="results-table" class="demo"> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>

Answer 2

如果你獲得一個HTMLTableElement ，你可以得到行，然后得到里面的單元格：

const table = document.querySelector("div#results-table > table"), // get the table
  rows = table.rows, // get the <tr> elements inside it
  cells = rows.map(row => row.cells.map(cell => cell.textContent)); // gets a 2d list of cells. you could use innerHTML or innerText instead of textContent.

Answer 3

 const trs = document.querySelectorAll('#results-table tr'); const result = []; for(let tr of trs) { let th_td = tr.getElementsByTagName('td'); if (th_td.length == 0) { th_td = tr.getElementsByTagName('th'); } let th_td_array = Array.from(th_td); // convert HTMLCollection to an Array th_td_array = th_td_array.map(tag => tag.innerText); // get the text of each element result.push(th_td_array); } console.log(result);

 <div id="results-table"> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table>

Answer 4

用這個 HTML，

<div id="results-table">
    <table>
    </table>
</div>

使用此腳本填充表格：-

var data = [
    ["Company", "Contact", "Country"],
    ["Alfreds Futterkiste", "Maria Anders", "Germany"],
    ["Centro comercial Moctezuma", "Francisco Chang", "Mexico"],
    ["Ernst Handel", "Roland Mendel", "Austria"],
    ["Island Trading", "Helen Bennett", "UK"],
    ["Laughing Bacchus Winecellars", "Yoshi Tannamuri", "Canada"],
    ["Magazzini Alimentari Riuniti", "Giovanni Rovelli", "Italy"]
];

function fillTable(data) {
    data.map((row, i) => {
        let htmlToAdd = '<tr>'
        row.map(cell => {
            if (i === 0) {
                htmlToAdd += '<th>' + cell + '</th>';
            } else {
                htmlToAdd += '<td>' + cell + '</td>';
            }
        });
        htmlToAdd += '</tr>';
        document.querySelector('#results-table table').innerHTML += htmlToAdd;
    })
}

fillTable(data);