JavaScript程序以显示乘法表

简介

这个JavaScript程序展示了如何使用for循环来创建乘法表。它使用两个for循环来完成表格的每一行和每一列。可以通过简单更改rows和cols变量的值来增加或减少表格的大小。

代码

// 设置表格行数和列数
var rows = 10;
var cols = 10;

// 创建表格并插入HTML页面中的元素
var table = document.createElement('table');
document.body.appendChild(table);

// 创建表格中的行和列
for (var i = 1; i <= rows; i++) {
  var row = document.createElement('tr');
  table.appendChild(row);
  for (var j = 1; j <= cols; j++) {
    // 创建单元格中的内容
    var product = i * j;
    var cell = document.createElement('td');
    var cellText = document.createTextNode(product);
    cell.appendChild(cellText);
    // 将单元格添加到行中
    row.appendChild(cell);
  }
}

代码解释

• rows和cols变量用于设置表格的行数和列数。
• 使用document.createElement()方法创建一个新的HTMLtable元素。
• 使用document.body.appendChild()方法将表格元素添加到HTML页面中。
• 使用两个for循环来创建表格，外层循环用于创建表格中的行，内层循环用于创建表格中的列。
• 在每个单元格中，使用公式i * j计算乘积，并将结果传递给document.createTextNode()方法。
• 使用document.createElement()方法创建一个新的HTMLtd元素，并将上面创建的文本节点添加到其中。
• 最后，使用appendChild()方法将单元格元素添加到行元素中。

代码演示

以下是该JavaScript程序在网页上的演示效果：

| | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | |----------|---|---|---|---|---|---|---|---|---|----| | 1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | | 2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 |18 | 20 | | 3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 | | 4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | | 5 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | | 6 | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 | 60 | | 7 | 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 | 70 | | 8 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | | 9 | 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 | 90 | | 10 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 |

总结

这个JavaScript程序演示了如何使用for循环来创建乘法表格。通过更改rows和cols变量，您可以轻松地调整表格的大小。请注意，在大型数据集上，循环可能会导致性能问题。对于更高效的方式，您可以考虑使用其他技术，如JavaScript模板引擎或React表格组件。