Question

x 1 2 3 4 5 6 7 8
1 1 2 3 4 5 6 7 8
2 2 4 6 8 10 12 16

我想构建一个使用字符串的乘法表使用javascript中的嵌套循环逐步构建它，然后返回此字符串。谁有人可以提供帮助？感谢名单

Answer 1

＆＃13;

function showTable() {
    var size = document.getElementById('size').value
    ,   result = '<table><tr>';
    for(var y = 0; y <= size; y ++) {
        result += '<td>' + (y == 0 ? 'X' : y) + '</td>';
    }
    result += '</tr>';
    for (var y = 1; y <= size; y ++) {
        for (var x = 1; x <= size; x ++) {
            result += '<td>' + (x == 1 ? y + '</td><td>' : '') + (x * y) + '</td>';
        }
        result += '</tr>';
    }
    document.getElementById('result').innerHTML = result + '</table>';
}

＆＃13;

Size: <input id='size' type='number' onchange='showTable();' onkeyup='showTable();' value='9'/><br/>
Result: <div id='result'></div>

＆＃13;

Answer 2

尝试从0 - 12创建一个数字对象保持数组，在同一索引处使用Array.prototype.map()到前一个数组编号的多个当前数字

var res = {}; 
var arr = [0,1,2,3,4,5,6,7,8,9,10,11,12];
arr.forEach(function(val, key, arr) {
  if (key === 0) res[key] = arr;
  if (key > 0) {
    res[key] = res[key - 1].map(function(v, k) {
      return k === 0 ? val : val * k
    })
  }
});

for (prop in res) {
  var div = document.createElement("div");
  div.innerHTML = res[prop].map(function(n) {
                     var span = document.createElement("span");
                     span.innerHTML = n == 0 ? "x" : n;
                     return span.outerHTML
                  }).join(" ") + "<br>";
  document.body.appendChild(div);
}

console.log(JSON.stringify(res, null, 2))

span {
  font-family:monospace;
  font-weight:bold;
  display:inline-block;
  white-space:pre-wrap;
  width:28px;
}

构造一个乘法表

2 个答案: