如何使用JavaScript实现自定义行列数自动填充乘法表

现有代码问题说明 #

你当前的实现逻辑是提前生成固定的空<td>模板，再重复拼接多行生成空表格，这种写法无法在生成阶段匹配每个单元格对应的行、列序号，自然没法计算乘积填入；另外直接取input的value是字符串类型，未做数值转换和合法性校验，且原HTML存在table标签内直接嵌套div的语法错误，会导致渲染异常。

核心实现逻辑 #

• 采用双层嵌套循环生成表格：外层循环遍历每一行，内层循环遍历当前行的每一列
• 行、列计数均从1开始计数，每个单元格的内容直接为当前行序号 × 当前列序号的计算结果
• 生成表格前先对用户输入做合法性校验，拦截非正整数的无效输入
• 修正HTML嵌套错误，将结果表格移到外层表单table外部，避免浏览器解析异常

修改后完整代码 #

JavaScript 部分 #

const go = document.getElementById('btn');
const table = document.getElementById('table');

go.addEventListener('click', () => {
  // 将输入值转为整数
  const numCol = parseInt(document.getElementById('txtColumns').value);
  const numRow = parseInt(document.getElementById('txtRows').value);

  // 校验输入合法性
  if (isNaN(numCol) || isNaN(numRow) || numCol <= 0 || numRow <= 0) {
    alert('请输入大于0的正整数作为行列数');
    return;
  }

  let tableHtml = '';
  // 外层循环生成每一行
  for (let rowIndex = 1; rowIndex <= numRow; rowIndex++) {
    tableHtml += '<tr>';
    // 内层循环生成当前行的每个单元格
    for (let colIndex = 1; colIndex <= numCol; colIndex++) {
      // 计算乘积直接填入td标签
      tableHtml += `<td>${rowIndex * colIndex}</td>`;
    }
    tableHtml += '</tr>';
  }

  // 写入表格节点
  table.innerHTML = tableHtml;
})

HTML 部分（修正结构错误） #

<html>
    <head>
        <meta charset="utf-8">
        <title>Multiply Table</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <table class="workTable">
            <tr>
                <td>
                    <input type="number" placeholder="Columns Number" id="txtColumns" min="1">
                </td>
                <td>
                    <input type="number" placeholder="Rows Number" id="txtRows" min="1">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="btn">send</button>
                </td>
            </tr>
        </table>
        <!-- 结果表格移到外层table外部，符合HTML嵌套规范 -->
        <div>
            <table id="table" class="table" border="1">
                <!-- 乘法表生成位置 -->
            </table>
        </div>
        <script src="script.js"></script>
    </body>
</html>

效果验证 #

输入5列、4行参数时，生成的表格内容完全匹配预期：

1 | 2 | 3 | 4 | 5
2 | 4 | 6 | 8 | 10
3 | 6 | 9 | 12 | 15
4 | 8 | 12 | 16 | 20

内容的提问来源于stack exchange，提问作者Daniel