js怎么实现九九乘法表

在JavaScript中实现九九乘法表有多种方法，包括嵌套循环、使用数组存储结果、动态生成HTML表格等。下面我们将详细介绍一种常见且易于理解的方法，即通过嵌套循环在控制台输出九九乘法表。

嵌套循环：使用两层for循环分别控制行和列，可以轻松实现乘法表的生成。以下是具体实现方式：

一、基本实现方式

在JavaScript中使用嵌套循环实现九九乘法表非常直观。我们可以使用两个for循环，外层循环控制行数，内层循环控制列数。以下是代码示例：

for (let i = 1; i <= 9; i++) {
    let row = '';
    for (let j = 1; j <= i; j++) {
        row += `${j} * ${i} = ${j * i}t`;
    }
    console.log(row);
}

二、生成HTML表格展示九九乘法表

如果希望在网页上动态展示九九乘法表，可以通过JavaScript生成HTML表格。以下是具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="multiplication-table"></table>
    <script>
        const table = document.getElementById('multiplication-table');
        for (let i = 1; i <= 9; i++) {
            const row = table.insertRow();
            for (let j = 1; j <= i; j++) {
                const cell = row.insertCell();
                cell.textContent = `${j} * ${i} = ${j * i}`;
            }
        }
    </script>
</body>
</html>

三、使用数组存储九九乘法表

通过数组可以更灵活地处理和操作九九乘法表的数据。以下是使用数组存储结果的实现方式：

const multiplicationTable = [];
for (let i = 1; i <= 9; i++) {
    const row = [];
    for (let j = 1; j <= i; j++) {
        row.push(`${j} * ${i} = ${j * i}`);
    }
    multiplicationTable.push(row);
}
console.log(multiplicationTable);

四、通过函数封装九九乘法表的生成

将九九乘法表的生成逻辑封装在一个函数中，可以提高代码的重用性和可维护性。以下是具体实现：

function generateMultiplicationTable() {
    const table = [];
    for (let i = 1; i <= 9; i++) {
        const row = [];
        for (let j = 1; j <= i; j++) {
            row.push(`${j} * ${i} = ${j * i}`);
        }
        table.push(row);
    }
    return table;
}
const multiplicationTable = generateMultiplicationTable();
multiplicationTable.forEach(row => console.log(row.join('t')));

五、将九九乘法表动态插入到网页中

通过JavaScript将生成的九九乘法表动态插入到网页中，可以提高用户体验。以下是具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="multiplication-container"></div>
    <script>
        function generateMultiplicationTable() {
            const table = [];
            for (let i = 1; i <= 9; i++) {
                const row = [];
                for (let j = 1; j <= i; j++) {
                    row.push(`${j} * ${i} = ${j * i}`);
                }
                table.push(row);
            }
            return table;
        }
        function insertMultiplicationTableToDOM() {
            const container = document.getElementById('multiplication-container');
            const table = document.createElement('table');
            const multiplicationTable = generateMultiplicationTable();
            multiplicationTable.forEach(rowData => {
                const row = table.insertRow();
                rowData.forEach(cellData => {
                    const cell = row.insertCell();
                    cell.textContent = cellData;
                });
            });
            container.appendChild(table);
        }
        insertMultiplicationTableToDOM();
    </script>
</body>
</html>

六、使用CSS美化九九乘法表

为了让九九乘法表在网页上看起来更美观，可以使用CSS进行样式调整。以下是具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #f9f9f9;
        }
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <div id="multiplication-container"></div>
    <script>
        function generateMultiplicationTable() {
            const table = [];
            for (let i = 1; i <= 9; i++) {
                const row = [];
                for (let j = 1; j <= i; j++) {
                    row.push(`${j} * ${i} = ${j * i}`);
                }
                table.push(row);
            }
            return table;
        }
        function insertMultiplicationTableToDOM() {
            const container = document.getElementById('multiplication-container');
            const table = document.createElement('table');
            const multiplicationTable = generateMultiplicationTable();
            multiplicationTable.forEach(rowData => {
                const row = table.insertRow();
                rowData.forEach(cellData => {
                    const cell = row.insertCell();
                    cell.textContent = cellData;
                });
            });
            container.appendChild(table);
        }
        insertMultiplicationTableToDOM();
    </script>
</body>
</html>

通过以上几种方式，我们可以在JavaScript中实现九九乘法表的生成和展示。无论是通过控制台输出、生成HTML表格，还是动态插入到网页中，都可以灵活运用这些方法来满足不同的需求。希望这些示例能帮助你更好地理解和掌握JavaScript中的九九乘法表实现。