如何更改箱號的順序？-有解無憂

我的盒子里的數字順序如下：

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

如何更改箱號的順序？

我怎樣才能把它改成這樣：

如何更改箱號的順序？

uj5u.com熱心網友回復：

你可以使用這個：

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 }

<table></table>

uj5u.com熱心網友回復：

這是一個構建二維陣列并將其作為表（行/列）附加到 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/405961.html

標籤：

上一篇：如何在python中更改串列的元素，而不僅僅是重新分配整個串列

下一篇：如何為各個欄位創建一個物件陣列