Question

我正在努力创建一个乘法表来显示表格单元格中的结果，并且只要在提示对话框中键入新数字，它就会生成一个新表格。到目前为止，我已经创建了第一行和第一个冒号。我尝试了不同的方法来进行乘法，但它对我不起作用。你能帮助我吗？（在这里你有HTML，CSS和JS代码。）

＆＃13;

jQuery(document).ready(function() {

  while (true) {

    var $Number = prompt("Choose a number to create the Multiplication Table:");
    if ($Number === '' + parseInt($Number)) {
      break;
    } else {
      alert("You didn't type a number! Please type a number!");
    }

  }

  for (var a = 1; a < parseInt($Number) + 1; a++) {
    var cell = $("<td>" + a + "</td>");
    $("#row1").append(cell); //Krijon rreshtin e pare me numrat nga 1 deri ne $Number

    var colon = $("<tr> <td>" + a + "</t> </tr>").attr("class", a);
    $("table").append(colon); //Krijon kolonen e pare me numrat nga 1 deri ne $Number

  }

})

＆＃13;

body {
  max-width: 90%;
  font-family: 'Open Sans', sans-serif;
  margin: 0 auto;
}
h1 {
  text-align: center;
  margin-bottom: 1.5em;
}
table {
  text-align: center;
  margin-left: 2em;
  margin-top: 1em;
}
td {
  padding: 1em;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

  <h1> Multiplication Table </h1>

  <table border="1">
    <tr id="row1">
      <td>X</td>
    </tr>

  </table>

</body>

</html>

＆＃13;

Answer 1

您可以尝试这样的事情：

逻辑

表格分为3部分，

上图：＆＃34; X＆＃34;其次是数字
左侧面板：仅限数字
body：乘法值。

JSFiddle

＆＃13;

function createBody(num) {
  var _html = "";
  for (var r = 0; r < num;) {
    _html += "<tr>";
    _html += "<td>" + ++r + "</td>";
    for (var c = 1; c <= num; c++) {
      _html += "<td>" + r * c + "</td>";
    }
    _html += "</tr>";
  }
  return _html;
}

function createHeader(num) {
  var _html = "<tr>";
  _html += "<td>X</td>";
  for (var r = 1; r <= num; r++) {
    _html += "<td>" + r + "</td>";
  }
  _html += "</tr>";
  return _html
}

(function() {
  var n = window.prompt("Enter a number");
  var html = createHeader(n) + createBody(n);
  document.getElementById("content").innerHTML = html
})()

＆＃13;

table {
  text-align: center;
  margin-left: 2em;
  margin-top: 1em;
}
td {
  padding: 1em;
  border: 1px solid #ddd
}

＆＃13;

<table id="content"></table>

＆＃13;

注意：在循环中追加元素是一种不好的做法。您应该创建html字符串并执行批量操作。

Answer 2

这是一个使用嵌套循环的简单示例，如mpf82所示。

var table = document.getElementById("myTable");
var temp = '';
var max = parseInt(prompt("Type max number", "10"));
var t = new Date().getTime();
for (var y = 1; y <= max; y++) {
  var row = '<tr>';
  for (var x = 1; x <= max; x++) {
    row += '<td>' + (x * y).toFixed(0) + '</td>';
  }
  temp += row + '</tr>';
}
console.log(new Date().getTime() - t, 'ms to build string');
t = new Date().getTime();
table.innerHTML = temp;
console.log(new Date().getTime() - t, 'ms to append string');

table {
  width: 100%;
}

<table id="myTable"></table>

Answer 3

纯JS可能是你可以通过使用tableMaker函数做这样的事情。 Table maker获取一组对象并返回一个HTML表字符串。数组的每个对象项指定表中的一行，其中对象属性指定列。因此，例如{a：1，b：2}将意味着具有值为1和2的两个单元格的行。然后表格标题为＆＃34; a＆＃34;和＆＃34; b＆＃34;。所有对象应具有完全相同的属性，以防止标题名称或列数发生冲突。

＆＃13;

function tableMaker(o,h){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

function makeRow(i){
  var o = {},
      j = 0;
  while (j < size + 1) j === 0 ? o[j++]  = "<b>" + (i+1) + "</b>"
                               : o[j] = (i+1) * j++;
  return o;
}
var  size = 10;
tableData = new Array(size).fill().map((row,i) => makeRow(i));
myTable.innerHTML = tableMaker(tableData,true)

＆＃13;

<div id="myTable"></div>

＆＃13;

如何创建JavaScript乘法表？

3 个答案:

逻辑