數字之間的Javascript空間中的乘法表？-有解無憂

 var numbers = ""; 
    for (var i = 1; i <= 13; i  ){
      for (var j = 1; j<= 13; j  ){
          numbers  = (i*j)   '';
       }
       numbers  = '<br>';
    }

element.innerHTML = numbers;

如何在每個數字之間留一個空格？

例子：數字之間的Javascript空間中的乘法表？

uj5u.com熱心網友回復：

你可以使用 < table > 來組織你的文本：

let numbers = "<tbody>"; 
for (let i = 1; i <= 13; i  ){
  numbers  = '</tr>';
  for (let j = 1; j<= 13; j  ){
      numbers  = `<td>${i*j}</td>`;
  }
  numbers  = '</tr>';
}
numbers  = "</tbody>"
const element = document.querySelector("#element");
element.innerHTML = numbers;

td {
  text-align: right;
  width: 2em;
}

<table id="element">

uj5u.com熱心網友回復：

您可以使用grid帶有一些 CSS 變數的方法來制作單元格元素，有關更多詳細資訊，請參閱代碼片段中的注釋：

你也可以渲染單元格的標題。

const gridSize = 13;

// get grid element
const grid = document.querySelector('.grid');

// create temporary wrapper
const fragmentWrapper = document.createDocumentFragment();

const renderTop = () => {
  for (var i = 0; i <= gridSize; i  ) {
    if (i === 0) {
      // render mult char
      renderCell('x');
      
      continue;
    }
  
    renderCell(i, true);
  }
}

const renderGrid = () => {
  // append cells to wrapper
  for (var i = 1; i <= gridSize; i  ) {
    for (var j = 0; j <= gridSize; j  ) {
      if (j === 0) {
        // render heading cell
        const num = i;
        renderCell(num, true);
        
        continue;
      }
      
      // render default cell
      const num = i * j;
      renderCell(num);
    }
  }
}

const renderCell = (num, select = false) => {
  // create temporary cell
  const cell = document.createElement('div');
  cell.className = 'cell';
  // if requested to highligh cell
  select && cell.classList.add('select');
  cell.innerText = `${ num }`;

  // add cell to grid 
  fragmentWrapper.append(cell);
}

renderTop();
renderGrid();

// set grid size
grid.style.setProperty('--grid-size', gridSize);

// render grid
grid.append(fragmentWrapper);

.grid {
  display: grid;
  grid-template-columns: repeat(calc(var(--grid-size)   1), 1fr);
  /* using CSS grid size (set in JS) */
  gap: .25rem;
}

.cell {
  display: flex;
  align-items: center;
  /* align content */
  justify-content: center;
  /* align content */
  aspect-ratio: 1/1;
  /* make cell square */
  border: 1px solid #d4d4d4;
  /* show cell borders */
}

.cell.select {
  background-color: tomato;
  color: white;
  font-weight: bold;
}

<div class="grid"></div>

uj5u.com熱心網友回復：

你可以雄心勃勃，就像大衛所說的那樣，使用 CSS 來衡量資料的顯示方式。我CSS grid在這個例子中使用了這意味著你只需要一個回圈，其余的由 CSS 來處理。

const arr = [];

const size = 13;
const limit = size * size;

// Push an HTML template string into
// the array
for (var i = 1; i <= limit; i  ) {
  arr.push(`<div>${i}</div>`);
}

// Add the joined array (it makes an HTML string
// to the element with the `grid` class
const grid = document.querySelector('.grid');
grid.innerHTML = arr.join('');

.grid {
  display: grid;
  grid-template-columns: repeat(13, 30px);
  grid-gap: 0.2em;
}

.grid div {
  border: 1px solid #cdcdcd;
  font-size: 0.8em;
  background-color: #efefef;
  text-align: center;
  padding: 0.5em 0;
}

<div class="grid"></div>

附加檔案

模板/字串文字

編輯：您甚至可以創建一個接受數字的函式，并且使用CSS variables，該函式將計算出所需網格的大小并回傳 HTML。

function createGrid(columns) {

  const arr = [];
  const grid = columns * columns;

  document.documentElement.style.setProperty('--columns', columns)
  
  // Push an HTML template string into
  // the array
  for (var i = 1; i <= grid; i  ) {
    arr.push(`<div>${i}</div>`);
  }

  return arr.join('');
}

const grid = document.querySelector('.grid');
grid.innerHTML = createGrid(5);

:root {
  --columns: 13;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 40px);
  grid-gap: 0.2em;
}

.grid div {
  border: 1px solid #cdcdcd;
  font-size: 0.8em;
  background-color: #efefef;
  text-align: center;
  padding: 0.5em 0;
}

<div class="grid"></div>

uj5u.com熱心網友回復：

請像這樣使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
     table {
        border-collapse: collapse;
        width: 100%;
      }

      th, td {
        text-align: left;
        padding: 8px;
      }
    </style>
</head>
<body>
  <div id="test" style="width:800px;height: 350px; border: 1px solid sandybrown;">
     
  </div>
  <script>
    var  element =  document.getElementById("test");
    var html = "<table>";
    for (var i = 1; i <= 10; i  ){
        html  = "<tr>";
          for (var j = 1; j<= 10; j  ){
              html  = "<td>"  (i*j)  "</td>";
          }
        html  = '</tr> ';
    } 
    html  = "</table>";
    element.innerHTML = html;
  </script>
</body>
</html>

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

標籤：javascript

上一篇：物件陣列減少打字稿錯誤：不可分配給“從不”型別的引數

下一篇：在嵌套回應中設定狀態