0
207
Views¿Cómo puedo cambiar el orden de los números de casilla?
El orden de los números en mi casilla es el siguiente:
function boxNumbers(){ let boxes = document.querySelectorAll('.box') boxes.forEach((box,i)=>{ if(String(i).length==1 || (String(i).length==2 && Number(String(i)[0]))%2==0){ //box.innerHTML = `${100-i}, i=${i}` box.innerHTML = 100-i } else{ box.innerHTML = String(Number(`${9-Number(String(i)[0])}${String(i)[1]}`)+ 1) } }) } 
¿Cómo puedo cambiarlo para que se vea así:
·
Juan Pablo Isaza
2 answers
Answer question0
Puedes usar esto:
function boxNumbers() { let boxes = document.querySelectorAll('.box'); let n = Math.sqrt(boxes.length); [...boxes].reverse().forEach((box, i) => { box.textContent = i % (n * 2) < n ? i + 1 : i + n - 2*(i % n); }) } Con la asignación a n , lo hace un poco más genérico, aún suponiendo que su tabla sea cuadrada. Al invertir la iteración, elimina la necesidad de la resta de 100- . Lo que queda es una fórmula que detecta si estamos en una fila con una secuencia inversa o no, y adapta el número en consecuencia. El número "1" siempre estará en la esquina inferior derecha:
function boxNumbers() { let boxes = document.querySelectorAll('.box'); let n = Math.sqrt(boxes.length); [...boxes].reverse().forEach((box, i) => { box.textContent = i % (n * 2) < n ? i + 1 : i + n - 2*(i % n); }) } // Utility to create the table function fillTable(table, n) { for (let i = 0; i < n; i++) { let row = table.insertRow(); for (let j = 0; j < n; j++) { let cell = row.insertCell(); cell.className = "box"; } } } // Example run with n=5. Adapt as needed let n = 5 fillTable(document.querySelector('table'), n); boxNumbers(); table { border-collapse: collapse } td { border: 1px solid ; width: 20px; height: 20px; text-align: center } <table></table>
·
Juan Pablo Isaza
Report
0
Aquí hay una función que crea una matriz bidimensional y la agrega como una tabla (fila/columna) a un elemento dom. Puedes adaptarlo a tu plantilla como desees. Funciona con cualquier número base, el tuyo es 5
function buildMatrix(baseNumber){ var flip = false; var countDownNumber = baseNumber * baseNumber; var currNumber = countDownNumber; var matrix = ""; for(i = 0; i < baseNumber; i++) { if(i !== 0){ currNumber = (flip)? countDownNumber + 1 - baseNumber : countDownNumber; } matrix += "<tr>"; for(j = 0; j < baseNumber; j++){ matrix += "<td>" + currNumber + "</td>"; // depending on the direction (flip) we increment or decrement (flip)? currNumber++ : currNumber--; countDownNumber--; } // change direction at the end of a row flip = !flip; matrix += "</tr>"; } return matrix; } var baseSquareNumber = 11; // here you put 5 var matrixHtml = buildMatrix(baseSquareNumber); document.getElementById("matrix").innerHTML = matrixHtml; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <table id="matrix"> </table> </body> </html>
·
Juan Pablo Isaza
Report
Answer question