Necesito un script donde pueda obtener la matriz 2D de la fila y las columnas de la tabla html dentro de div.
La salida esperada es
[ ["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>Necesito un script donde pueda obtener la matriz 2D de la fila y las columnas de la tabla html dentro de div.
Use un reducer , algo así como
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>Si obtiene un HTMLTableElement , puede obtener las filas y luego obtener las celdas dentro:
const table = document.querySelector("div#results-table > table"), // get the table rows = Array.from(table.rows), // get the <tr> elements inside it and convert it to an array cells = rows.map(row => Array.from(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>