怎么用JS显示乘法表

如何用JS显示乘法表

用JS显示乘法表的方法有：创建HTML表格、使用嵌套循环、动态插入DOM元素。其中，使用嵌套循环是最常用且高效的方法。通过嵌套的for循环，可以轻松地生成乘法表的数据，并将其插入到HTML结构中，实现动态显示。

一、创建HTML表格

在显示乘法表之前，首先需要一个HTML框架来放置生成的表格。可以使用HTML的<table>标签来创建表格结构。

<!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: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Multiplication Table</h1>
    <table id="multiplication-table"></table>
    <script src="script.js"></script>
</body>
</html>

二、使用嵌套循环

嵌套循环是生成乘法表的关键部分。通过两个for循环，内外循环分别控制行和列，从而生成乘法表的每一项。

document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('multiplication-table');
    // Create table header
    let headerRow = '<tr><th>*</th>';
    for (let i = 1; i <= 9; i++) {
        headerRow += `<th>${i}</th>`;
    }
    headerRow += '</tr>';
    table.innerHTML += headerRow;
    // Create table body
    for (let i = 1; i <= 9; i++) {
        let row = `<tr><th>${i}</th>`;
        for (let j = 1; j <= 9; j++) {
            row += `<td>${i * j}</td>`;
        }
        row += '</tr>';
        table.innerHTML += row;
    }
});

三、动态插入DOM元素

使用JavaScript的DOM操作，可以动态插入生成的乘法表数据到HTML结构中。这样的方法不仅高效，而且可以根据不同需求进行灵活调整。

1. 创建表格头部

首先，需要在表格中创建表头，这样可以更直观地显示乘法表。

function createTableHeader(table) {
    let headerRow = '<tr><th>*</th>';
    for (let i = 1; i <= 9; i++) {
        headerRow += `<th>${i}</th>`;
    }
    headerRow += '</tr>';
    table.innerHTML += headerRow;
}

2. 创建表格主体

接下来，通过嵌套循环创建表格的每一行和每一列。

function createTableBody(table) {
    for (let i = 1; i <= 9; i++) {
        let row = `<tr><th>${i}</th>`;
        for (let j = 1; j <= 9; j++) {
            row += `<td>${i * j}</td>`;
        }
        row += '</tr>';
        table.innerHTML += row;
    }
}

3. 初始化表格

通过DOMContentLoaded事件确保在DOM加载完毕后执行上述创建表格头部和主体的函数。

document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('multiplication-table');
    createTableHeader(table);
    createTableBody(table);
});

四、优化与扩展

1. 响应式设计

为了在不同设备上都能友好地显示乘法表，可以结合CSS Media Queries实现响应式设计。

@media (max-width: 600px) {
    table {
        font-size: 12px;
    }
}

2. 增强用户体验

为了增加用户体验，可以通过JavaScript事件监听增加交互效果，比如当用户鼠标悬停在某个单元格时，突出显示对应的行和列。

document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('multiplication-table');
    createTableHeader(table);
    createTableBody(table);
    table.addEventListener('mouseover', function(event) {
        if (event.target.tagName === 'TD') {
            const row = event.target.parentNode;
            const colIndex = event.target.cellIndex;
            highlightCells(row, colIndex);
        }
    });
    table.addEventListener('mouseout', function(event) {
        if (event.target.tagName === 'TD') {
            removeHighlight();
        }
    });
});
function highlightCells(row, colIndex) {
    row.classList.add('highlight');
    const cells = document.querySelectorAll(`td:nth-child(${colIndex + 1})`);
    cells.forEach(cell => cell.classList.add('highlight'));
}
function removeHighlight() {
    const highlightedCells = document.querySelectorAll('.highlight');
    highlightedCells.forEach(cell => cell.classList.remove('highlight'));
}

.highlight {
    background-color: #f0e68c;
}

通过这种方式，可以实现一个动态且交互性良好的乘法表应用。

五、总结

用JavaScript显示乘法表主要通过以下几个步骤：创建HTML表格、使用嵌套循环生成数据、动态插入DOM元素。通过适当的优化和扩展，还可以增强用户体验和适应不同设备。上述方法不仅高效，而且具有高度的灵活性，可以根据需求进行各种调整和改进。