How can I change the order of the box numbers?-CodePudding

The order of the numbers in my box is as follows:

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) 
    
          
        }
    })
    
    }

how can I change it to look like this:

CodePudding user response：

You can use this:

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);
    })
}

With the assignment to n you make it a bit more generic -- still assuming your table is square. By reversing the iteration, you eliminate the need for the 100- subtraction. What remains is a formula that detects whether we're on a row with a reverse sequence or not, and adapts the number accordingly. The number "1" will always be in the bottom-right corner:

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>

CodePudding user response：

Here is a function which builds a bi-dimensional array and appends it as a table (row/col) to a dom element. You can adapt it to your template as you wish. Works with any base number, yours is 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>