如何格式化爪哇脚本/html刺痛设置宽度？

Question

我想创建一个乘法10 x 10板。每个“单元格”应具有相同的宽度。for (i = 1; i < 11; i++) {  for (j = 1; j < 11; j++) {    document.write(i * j + " ")  }  document.write("<br>")}

Answer 1

使用字符串的解决方案：

let html = "";

for (let i = 1; i < 11; i++) {

  for (let j = 1; j < 11; j++) {

    html += String(i * j).padStart(3, " ") + " ";

  }

  html += "<br>";

}

document.getElementById("output").innerHTML = html.replace(/ /g, "&nbsp;");

#output {

  font-family: monospace;

}

<output id="output"></output>

Answer 2

用

• <pre> 预格式化文本 元素

• 本机字符串.prototype.padStart（）

document.write("<pre>")

for (i = 1; i < 11; i++) {

  for (j = 1; j < 11; j++) {

    document.write(String(i * j).padStart(4, ' '))

  }

  document.write("<br>")

}

document.write("</pre>")

Answer 3

此解决方案适用于 和 html 选项卡实体pre&#9;

document.write("<pre>")

  for (let i = 1; i < 11; i++) {

    for (let j = 1; j < 11; j++)

      document.write(i * j + "&#9;")

    document.write("<br>")

  }

document.write("</pre>")

你可以用css控制空间：tab-size

* {

    -moz-tab-size: 3em;

    -o-tab-size: 3em;

    tab-size: 3em;

}

Answer 4

您的代码中存在几个问题：

• 您应该使用<预>（预格式化文本）标记

• 您应该在 和 索引前面添加 一个，以将其本地范围缩小到letijfor

• 在循环中，如果将索引条件定义为（因为您正在计算从1到10的数字）而不是for<= 10< 11

• 你需要一个前缀和一个后缀（为了在我的示例中构建前缀，我使用了一个函数）

document.write('<pre>');

for (let i = 1; i <= 10; i++) {

  for (let j = 1; j <= 10; j++) {

    let number = i * j;

    let prefix = get_prefix(number);

    let suffix = '&nbsp;';

    document.write(prefix + number + suffix)

  }

  document.write('<br>')

}

document.write('</pre>');

function get_prefix(number) {

  let prefix = '';

  if (number < 100) {

    prefix += '&nbsp;';

  }

  if (number < 10) {

    prefix += '&nbsp;';

  }

  return prefix;

}