乘法表用js怎么写的

乘法表用JavaScript编写的方式主要通过嵌套循环来实现、动态生成表格元素、以及使用DOM操作将表格插入到HTML文档中。下面将详细介绍如何使用JavaScript编写一个乘法表，并展示相关代码。

一、初始化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>Multiplication Table</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #000;
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div id="table-container"></div>
    <script src="multiplication-table.js"></script>
</body>
</html>

二、编写JavaScript代码生成乘法表

JavaScript代码会动态生成一个乘法表，并将其插入到HTML文档中。

document.addEventListener('DOMContentLoaded', () => {
    // 获取表格容器
    const tableContainer = document.getElementById('table-container');
    // 创建表格
    const table = document.createElement('table');
    // 创建表头
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    const emptyHeader = document.createElement('th');
    headerRow.appendChild(emptyHeader);
    for (let i = 1; i <= 10; i++) {
        const th = document.createElement('th');
        th.textContent = i;
        headerRow.appendChild(th);
    }
    thead.appendChild(headerRow);
    table.appendChild(thead);
    // 创建表格主体
    const tbody = document.createElement('tbody');
    for (let i = 1; i <= 10; i++) {
        const row = document.createElement('tr');
        const rowHeader = document.createElement('th');
        rowHeader.textContent = i;
        row.appendChild(rowHeader);
        for (let j = 1; j <= 10; j++) {
            const cell = document.createElement('td');
            cell.textContent = i * j;
            row.appendChild(cell);
        }
        tbody.appendChild(row);
    }
    table.appendChild(tbody);
    // 将表格插入容器
    tableContainer.appendChild(table);
});

三、解释代码逻辑

1. 初始化表格容器

首先，通过 document.getElementById 获取表格容器元素。这个容器将用于存放生成的乘法表。

2. 创建表格元素

通过 document.createElement 创建一个 <table> 元素。接下来，我们需要为表格添加表头和表格主体。

3. 创建表头

表头包含一个空的单元格和数字1到10。通过嵌套循环创建 <th> 元素，并将其添加到表头行 <tr> 中，然后将表头行添加到 <thead> 中，最后将 <thead> 添加到表格中。

4. 创建表格主体

表格主体包含10行，每行代表一个乘数。每行的第一个单元格是行号（1到10），接下来的单元格是乘法结果。通过嵌套循环创建 <td> 元素，并将其添加到对应的行 <tr> 中，然后将行添加到 <tbody> 中，最后将 <tbody> 添加到表格中。

5. 将表格插入容器

最后，将生成的表格插入到表格容器中，以便在HTML文档中显示。

四、扩展功能

1. 动态输入范围

可以通过HTML表单让用户输入乘法表的范围，例如1到N。然后根据用户输入动态生成乘法表。

2. 样式优化

可以通过CSS进一步美化表格，例如添加边框、背景颜色、对齐方式等，使得乘法表更加美观和易读。

3. 响应式设计

使用媒体查询和Flexbox等技术，使乘法表在不同设备上都能良好展示，提升用户体验。

4. 代码优化

可以将生成表格的代码封装成一个函数，方便调用和维护。

function generateMultiplicationTable(n) {
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    const headerRow = document.createElement('tr');
    const emptyHeader = document.createElement('th');
    headerRow.appendChild(emptyHeader);
    for (let i = 1; i <= n; i++) {
        const th = document.createElement('th');
        th.textContent = i;
        headerRow.appendChild(th);
    }
    thead.appendChild(headerRow);
    table.appendChild(thead);
    const tbody = document.createElement('tbody');
    for (let i = 1; i <= n; i++) {
        const row = document.createElement('tr');
        const rowHeader = document.createElement('th');
        rowHeader.textContent = i;
        row.appendChild(rowHeader);
        for (let j = 1; j <= n; j++) {
            const cell = document.createElement('td');
            cell.textContent = i * j;
            row.appendChild(cell);
        }
        tbody.appendChild(row);
    }
    table.appendChild(tbody);
    return table;
}
document.addEventListener('DOMContentLoaded', () => {
    const tableContainer = document.getElementById('table-container');
    const table = generateMultiplicationTable(10);
    tableContainer.appendChild(table);
});

通过上述方式，我们不仅能够生成一个基本的乘法表，还可以根据需求进行扩展和优化，使其更具交互性和美观性。