JavaScript 与 jQuery 实现九九乘法表的代码示例

沿途有光

发布时间：2026-10-16| 6人浏览过

原创

本文详细介绍了使用原生 JavaScript 和 jQuery 实现九九乘法表的代码方法，涵盖 HTML 结构搭建、脚本编写及效果展示步骤。

原生 JavaScript 实现方法

原生 JavaScript 是前端开发的基础。要实现九九乘法表，可以通过嵌套循环遍历行数和列数，并利用 DOM 操作将生成的文本插入到页面指定容器中。

第1步：创建基础 HTML 结构

首先，需要创建一个包含容器的 HTML 文件，用于存放生成的乘法表内容。建议使用 <div> 或 <table> 作为容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 九九乘法表</title>
    <style>
        .multiply-table span {
            display: inline-block;
            width: 80px;
            margin: 5px;
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="result" class="multiply-table"></div>
    <script src="./app.js"></script>
</body>
</html>

第2步：编写 JavaScript 逻辑

在外部脚本文件或 <script> 标签中，使用双重 for 循环构建字符串，然后一次性更新 DOM 以提高性能。

// 获取目标容器
const container = document.getElementById('result');
let htmlContent = '';

// 外层循环控制行数（1到9）
for (let i = 1; i <= 9; i++) {
    // 内层循环控制列数（1到当前行数）
    for (let j = 1; j <= i; j++) {
        const result = i * j;
        htmlContent += `<span>${j} × ${i} = ${result}</span>`;
    }
}

// 将拼接好的 HTML 字符串插入容器
container.innerHTML = htmlContent;

这种方法不依赖任何第三方库，执行效率高，且代码逻辑清晰易懂。

jQuery 实现方法

jQuery 简化了 DOM 操作和事件处理。利用 jQuery 的链式调用和选择器功能，可以以更简洁的方式完成同样的任务。

第1步：引入 jQuery 库

在使用 jQuery 之前，确保在 HTML 页面头部引入了 jQuery 库文件。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

第2步：使用 jQuery 生成乘法表

结合原生 JS 的逻辑与 jQuery 的选择器和方法，可以更灵活地处理元素。

$(document).ready(function() {
    let $container = $('#result').empty(); // 清空容器
    
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            // 使用 jQuery 创建元素并追加
            $('').text(`${j} × ${i} = ${i * j}`).appendTo($container);
        }
    }
});

上述代码中，$(...) 用于创建新的 <span> 元素，.text() 设置内容，.appendTo() 将其添加到容器末尾。虽然此处使用了传统的循环结构，但 jQuery 使得 DOM 操作的语法更加紧凑。