JS怎么弄九九乘法表

在JavaScript中生成九九乘法表的方法包括：使用嵌套循环、创建表格结构、动态生成内容。其中，使用嵌套循环是最常见的方法。下面将详细介绍如何实现这一点。

一、嵌套循环生成九九乘法表

使用嵌套循环是生成九九乘法表的基本方法，这涉及两个循环：一个用于行，一个用于列。

1. 嵌套循环的基本概念

嵌套循环是指在一个循环体内再嵌套一个循环。对于九九乘法表，我们需要两个嵌套的for循环：外层循环表示行，内层循环表示列。

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

2. 动态生成内容

通过以上代码，可以在控制台中输出九九乘法表，但在实际应用中，我们通常需要将其显示在网页上。这时，可以使用DOM操作动态生成内容。

function generateMultiplicationTable() {
    let table = document.createElement('table');
    for (let i = 1; i <= 9; i++) {
        let row = document.createElement('tr');
        for (let j = 1; j <= 9; j++) {
            let cell = document.createElement('td');
            cell.innerText = `${i} * ${j} = ${i * j}`;
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    document.body.appendChild(table);
}
generateMultiplicationTable();

二、使用表格元素展示九九乘法表

1. 创建表格结构

表格元素（<table>）在HTML中用于显示数据的二维表格。创建一个表格需要使用<table>、<tr>（表格行）、<td>（表格单元格）等元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
</head>
<body>
    <table id="multiplicationTable"></table>
</body>
</html>

2. 使用JavaScript动态生成表格内容

在HTML中创建表格结构后，可以使用JavaScript动态生成表格内容。

document.addEventListener('DOMContentLoaded', function() {
    let table = document.getElementById('multiplicationTable');
    for (let i = 1; i <= 9; i++) {
        let row = document.createElement('tr');
        for (let j = 1; j <= 9; j++) {
            let cell = document.createElement('td');
            cell.innerText = `${i} * ${j} = ${i * j}`;
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
});

三、优化表格显示效果

1. 添加样式

为了让九九乘法表更美观，可以添加一些CSS样式。

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td {
        border: 1px solid #000;
        padding: 5px;
        text-align: center;
    }
</style>

2. 使用JavaScript设置样式

也可以通过JavaScript动态设置样式：

document.addEventListener('DOMContentLoaded', function() {
    let table = document.getElementById('multiplicationTable');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';
    for (let i = 1; i <= 9; i++) {
        let row = document.createElement('tr');
        for (let j = 1; j <= 9; j++) {
            let cell = document.createElement('td');
            cell.innerText = `${i} * ${j} = ${i * j}`;
            cell.style.border = '1px solid #000';
            cell.style.padding = '5px';
            cell.style.textAlign = 'center';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
});

四、使用函数封装逻辑

将生成九九乘法表的逻辑封装到函数中，便于调用和维护。

function createMultiplicationTable(rows, cols) {
    let table = document.createElement('table');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';
    for (let i = 1; i <= rows; i++) {
        let row = document.createElement('tr');
        for (let j = 1; j <= cols; j++) {
            let cell = document.createElement('td');
            cell.innerText = `${i} * ${j} = ${i * j}`;
            cell.style.border = '1px solid #000';
            cell.style.padding = '5px';
            cell.style.textAlign = 'center';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    document.body.appendChild(table);
}
document.addEventListener('DOMContentLoaded', function() {
    createMultiplicationTable(9, 9);
});

五、扩展功能

1. 动态设置行列数

可以通过用户输入动态设置行列数，生成不同大小的乘法表。

<input type="number" id="rows" placeholder="Rows" min="1" max="20">
<input type="number" id="cols" placeholder="Cols" min="1" max="20">
<button onclick="generateTable()">Generate</button>
<script>
    function generateTable() {
        let rows = document.getElementById('rows').value;
        let cols = document.getElementById('cols').value;
        document.getElementById('multiplicationTable').innerHTML = '';
        createMultiplicationTable(rows, cols);
    }
</script>

2. 添加颜色变化

可以为不同的乘法结果添加不同的颜色，使表格更具可读性。

function createMultiplicationTable(rows, cols) {
    let table = document.createElement('table');
    table.style.width = '100%';
    table.style.borderCollapse = 'collapse';
    for (let i = 1; i <= rows; i++) {
        let row = document.createElement('tr');
        for (let j = 1; j <= cols; j++) {
            let cell = document.createElement('td');
            cell.innerText = `${i} * ${j} = ${i * j}`;
            cell.style.border = '1px solid #000';
            cell.style.padding = '5px';
            cell.style.textAlign = 'center';
            cell.style.backgroundColor = `rgb(${Math.floor(255 - 15 * i)}, ${Math.floor(255 - 15 * j)}, 255)`;
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    document.body.appendChild(table);
}

通过以上步骤，您可以在网页中使用JavaScript生成美观的九九乘法表，并根据需要进行扩展和优化。