如何更改箱号的顺序？答案

【问题标题】：How can I change the order of the box numbers?如何更改箱号的顺序？
【发布时间】：2023-04-02 16:32:01
【问题描述】：

我的盒子里的数字顺序如下：

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

如何将其更改为如下所示：

【问题讨论】：

请提供相应的HTML代码。

标签： javascript arrays foreach

【解决方案1】：

你可以用这个：

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

分配给n 后，它会变得更加通用——仍然假设您的桌子是方形的。通过反转迭代，您消除了对 100- 减法的需要。剩下的是一个公式，它可以检测我们是否在反向序列上，并相应地调整数字。数字“1”将始终位于右下角：

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 }

&lt;table&gt;&lt;/table&gt;

【讨论】：

【解决方案2】：

这是一个构建二维数组并将其作为表（行/列）附加到 dom 元素的函数。您可以根据需要将其调整为模板。适用于任何基数，您的是 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>

【讨论】：