Estoy tratando de convertir mi cuadrícula CSS en un CSV. Encontré este hilo que muestra cómo formar los datos si puedo obtenerlos en un formato de matriz: ¿Cómo exportar información de matriz de JavaScript a csv (en el lado del cliente)? .
¿Hay alguna forma de seleccionar todos los valores div en la tabla de cuadrícula como una matriz? O incluso mejor, cree una matriz de matrices de filas
.grid-table { display: grid; grid-template-columns: repeat(5, 1fr); } <div class="grid-table"> <div>head1</div> <div>head2</div> <div>head3</div> <div>head4</div> <div>head5</div> <div>item1</div> <div>item2</div> <div>item3</div> <div>item4</div> <div>item5</div> <div>item6</div> <div>item7</div> <div>item8</div> <div>item9</div> </div>Puede tomar todos los elementos usando querySelectorAll y usar getComputedStyle para contar el número de columnas en cada fila. ver esta respuesta
var computedStyle = getComputedStyle(document.querySelector('.grid-table')) var columnsCount = computedStyle.getPropertyValue("grid-template-columns").split(" ").length // in our case 5 var container = document.querySelector('.grid-table') var columns = getComputedStyle(container).getPropertyValue("grid-template-columns").split(" ").length; var items = document.querySelectorAll('.grid-table div'); var output = [] var row = 0; items.forEach(function (item, i) { if (i % columns === 0) { if (output.length > 0) { row++ ; } output.push([]) } output[row].push(item.innerHTML) }); console.log(output) .grid-table { display: grid; grid-template-columns: repeat(5, 1fr); } <div class="grid-table"> <div>head1</div> <div>head2</div> <div>head3</div> <div>head4</div> <div>head5</div> <div>item1</div> <div>item2</div> <div>item3</div> <div>item4</div> <div>item5</div> <div>item6</div> <div>item7</div> <div>item8</div> <div>item9</div> </div>