Tengo una tabla que contiene algunos valores de texto. El problema principal es que primero tengo que obtenerlos y luego convertirlos en una matriz, así que hice un bucle, comprobé los valores en la tabla y cuando intento obtener su contenido, devuelve el mismo número. Aquí hay un ejemplo de código
HTML
<table id="my-table"> <tr id="default-row"> <td class = "cell" contenteditable="true">3</td> <td class = "cell" contenteditable="true">10</td> <td class = "cell" contenteditable="true">56</td> <td class = "cell" contenteditable="true">3</td> </tr> <tr> <td class = "cell" contenteditable="true">3</td> <td class = "cell" contenteditable="true">5</td> <td class = "cell" contenteditable="true">3</td> <td class = "cell" contenteditable="true">4</td> </tr> <tr> <td class = "cell" contenteditable="true">5</td> <td class = "cell" contenteditable="true">6</td> <td class = "cell" contenteditable="true">7</td> <td class = "cell" contenteditable="true">8</td> </tr> <tr> <td class = "cell" contenteditable="true">12</td> <td class = "cell" contenteditable="true">6</td> <td class = "cell" contenteditable="true">7</td> <td class = "cell" contenteditable="true">3</td> </tr> </table>JS
const cellValues = [] var table = document.getElementById("my-table"); //iterate trough rows for(var i = 0, row; row = table.rows[i]; i++) { //iterate trough columns for(var j = 0, col; col = row.cells[j]; j++) { cellValues.push(document.querySelector(".cell").textContent) //get text value of the cell } } console.log(cellValues)No está utilizando i y j dentro de sus bucles en absoluto, siempre solo consulta la primera .cell .
Podría hacer algo como table.querySelector('tr')[0].querySelector('.cell')[j] pero probablemente sea más fácil usar la variable col que ya tiene, que es exactamente el elemento que está buscando !
var table = document.getElementById("my-table"); //iterate trough rows for (var i = 0, row; row = table.rows[i]; i++) { //iterate trough columns for (var j = 0, col; col = row.cells[j]; j++) { cellValues.push(col.textContent) //get text value of the cell } } console.log(cellValues) Alternativamente, si no está interesado en i , j o row mucho, puede iterar sobre todas las .cell s:
const cellValues = [...document.querySelectorAll('.cell')] .map(cell => cell.textContent)Como se menciona en otras respuestas, el problema es document.querySelector() selecciona la primera celda cada vez.
Otro enfoque es usar .reduce() y .map()
const table = document.getElementById("my-table"); const cells = [...table.rows].reduce((acc, row) => [ ...acc, ...[...row.cells].map(cell => cell.textContent) ],[]); console.log(cells) <table id="my-table"> <tr id="default-row"> <td class = "cell" contenteditable="true">3</td> <td class = "cell" contenteditable="true">10</td> <td class = "cell" contenteditable="true">56</td> <td class = "cell" contenteditable="true">3</td> </tr> <tr> <td class = "cell" contenteditable="true">3</td> <td class = "cell" contenteditable="true">5</td> <td class = "cell" contenteditable="true">3</td> <td class = "cell" contenteditable="true">4</td> </tr> <tr> <td class = "cell" contenteditable="true">5</td> <td class = "cell" contenteditable="true">6</td> <td class = "cell" contenteditable="true">7</td> <td class = "cell" contenteditable="true">8</td> </tr> <tr> <td class = "cell" contenteditable="true">12</td> <td class = "cell" contenteditable="true">6</td> <td class = "cell" contenteditable="true">7</td> <td class = "cell" contenteditable="true">3</td> </tr> </table>Mantenlo simple y limpio. Simplemente reutilice las constantes anteriores. De esta manera, puede agregar chequeos si es necesario y saber en qué fila se encuentra.
const cellValues = [] const table = document.getElementById("my-table"); //iterate trough rows for (let i = 0; i <= table.rows.length - 1; i++) { // iterate trough columns for (let j = 0; j <= table.rows[i].cells.length - 1; j++) { // get text value of the cell cellValues.push(table.rows[i].cells[j].textContent) } } console.log(cellValues) <table id="my-table"> <tr id="default-row"> <td class="cell" contenteditable="true">3</td> <td class="cell" contenteditable="true">10</td> <td class="cell" contenteditable="true">56</td> <td class="cell" contenteditable="true">3</td> </tr> <tr> <td class="cell" contenteditable="true">3</td> <td class="cell" contenteditable="true">5</td> <td class="cell" contenteditable="true">3</td> <td class="cell" contenteditable="true">4</td> </tr> <tr> <td class="cell" contenteditable="true">5</td> <td class="cell" contenteditable="true">6</td> <td class="cell" contenteditable="true">7</td> <td class="cell" contenteditable="true">8</td> </tr> <tr> <td class="cell" contenteditable="true">12</td> <td class="cell" contenteditable="true">6</td> <td class="cell" contenteditable="true">7</td> <td class="cell" contenteditable="true">3</td> </tr> </table>