[英]Get html table data as array using js
我需要一个脚本,我可以在其中获取 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 表的行和列的二维数组。
使用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>
如果你获得一个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.
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>
用这个 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.