js乘法表怎么用

JS乘法表怎么用

在JavaScript中，创建一个乘法表是一种常见的练习，它有助于理解嵌套循环和DOM操作的基本概念。利用嵌套循环、动态创建表格元素、添加样式是实现JS乘法表的关键步骤。下面将详细描述如何使用JavaScript生成和操作乘法表。

一、利用嵌套循环生成乘法表

嵌套循环是生成乘法表的核心。在乘法表中，我们需要两个循环，一个用于行，一个用于列。每个单元格的值是行号和列号的乘积。

1. 基本嵌套循环

嵌套循环的基本形式如下：

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

    for (let j = 1; j <= 10; j++) {
        console.log(i * j);
    }
}

上述代码将输出一个10×10的乘法表，但是只是打印在控制台上。我们需要将其显示在网页上。

2. 动态创建表格元素

使用JavaScript的DOM操作，可以动态创建表格，并将乘法表数据填充到表格中。

二、动态创建表格元素

通过document.createElement()和appendChild()方法，可以动态创建和添加表格元素。

1. 创建表格框架

首先，需要创建一个表格元素，并将其添加到文档中：

let table = document.createElement('table');

document.body.appendChild(table);

2. 添加行和单元格

使用嵌套循环创建行和单元格，并将乘法结果填充到单元格中：

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

    let row = document.createElement('tr');
    table.appendChild(row);
    for (let j = 1; j <= 10; j++) {
        let cell = document.createElement('td');
        cell.innerText = i * j;
        row.appendChild(cell);
    }
}

三、添加样式

为了使乘法表更美观，可以使用CSS为表格添加样式。

1. 基础样式

通过JavaScript添加一些基础样式：

table.style.borderCollapse = 'collapse';

table.style.width = '50%';
table.style.margin = '20px auto';

2. 单元格样式

为每个单元格添加边框和内边距：

let cells = document.getElementsByTagName('td');

for (let cell of cells) {
    cell.style.border = '1px solid black';
    cell.style.padding = '10px';
    cell.style.textAlign = 'center';
}

四、实现交互功能

为了增强用户体验，可以为乘法表添加一些交互功能，例如鼠标悬停时高亮显示行和列。

1. 高亮显示行和列

添加事件监听器以实现高亮效果：

for (let cell of cells) {

    cell.addEventListener('mouseover', function() {
        let row = this.parentNode;
        let colIndex = Array.prototype.indexOf.call(row.children, this);
        highlightRowAndCol(row, colIndex, true);
    });
    cell.addEventListener('mouseout', function() {
        let row = this.parentNode;
        let colIndex = Array.prototype.indexOf.call(row.children, this);
        highlightRowAndCol(row, colIndex, false);
    });
}
function highlightRowAndCol(row, colIndex, highlight) {
    let rows = table.getElementsByTagName('tr');
    for (let r of rows) {
        r.children[colIndex].style.backgroundColor = highlight ? 'yellow' : '';
    }
    for (let cell of row.children) {
        cell.style.backgroundColor = highlight ? 'yellow' : '';
    }
}

五、完整代码示例

将上述步骤整合到一个完整的代码示例中：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS 乘法表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
            margin: 20px auto;
        }
        td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        let table = document.createElement('table');
        document.body.appendChild(table);
        for (let i = 1; i <= 10; i++) {
            let row = document.createElement('tr');
            table.appendChild(row);
            for (let j = 1; j <= 10; j++) {
                let cell = document.createElement('td');
                cell.innerText = i * j;
                row.appendChild(cell);
            }
        }
        let cells = document.getElementsByTagName('td');
        for (let cell of cells) {
            cell.addEventListener('mouseover', function() {
                let row = this.parentNode;
                let colIndex = Array.prototype.indexOf.call(row.children, this);
                highlightRowAndCol(row, colIndex, true);
            });
            cell.addEventListener('mouseout', function() {
                let row = this.parentNode;
                let colIndex = Array.prototype.indexOf.call(row.children, this);
                highlightRowAndCol(row, colIndex, false);
            });
        }
        function highlightRowAndCol(row, colIndex, highlight) {
            let rows = table.getElementsByTagName('tr');
            for (let r of rows) {
                r.children[colIndex].style.backgroundColor = highlight ? 'yellow' : '';
            }
            for (let cell of row.children) {
                cell.style.backgroundColor = highlight ? 'yellow' : '';
            }
        }
    </script>
</body>
</html>

通过上述步骤和完整代码示例，你可以在网页上动态生成一个具有交互功能的乘法表。这不仅展示了JavaScript的强大功能，还提供了一个良好的学习实践。

相关问答FAQs：

1. 如何使用JavaScript生成乘法表？

JavaScript可以通过使用嵌套的循环来生成乘法表。以下是一个示例代码：

for (let i = 1; i <= 10; i++) {
  for (let j = 1; j <= 10; j++) {
    let result = i * j;
    console.log(i + " x " + j + " = " + result);
  }
}

2. 如何在网页中显示JavaScript生成的乘法表？

要在网页中显示JavaScript生成的乘法表，可以使用DOM操作将乘法表的结果插入到HTML元素中。例如，可以创建一个空的<div>元素，然后使用JavaScript将乘法表的结果添加到该元素中。

<!DOCTYPE html>
<html>
<body>
  <div id="multiplication-table"></div>

  <script>
    var table = document.getElementById("multiplication-table");

    for (let i = 1; i <= 10; i++) {
      for (let j = 1; j <= 10; j++) {
        let result = i * j;
        let equation = i + " x " + j + " = " + result;
        table.innerHTML += equation + "<br>";
      }
    }
  </script>
</body>
</html>

3. 如何在JavaScript中控制乘法表的大小？

要控制乘法表的大小，可以使用变量来代替代码中的硬编码数字。例如，可以将乘法表的大小设置为用户输入的值，以便动态生成不同大小的乘法表。

var tableSize = prompt("请输入乘法表的大小：");

for (let i = 1; i <= tableSize; i++) {
  for (let j = 1; j <= tableSize; j++) {
    let result = i * j;
    console.log(i + " x " + j + " = " + result);
  }
}

通过使用不同的输入值，您可以生成任意大小的乘法表。